[Jquery] 날짜 달력 datepicker(데이트티커) > javascript
javascript

[Jquery] 날짜 달력 datepicker(데이트티커)

조회 42회 댓글 0건

블로그에 있는 datepicker는  안되는것이 많아서 사용할 일이 있어서 완성한것 올립니다.

jquery는 버전이 다르면 안될 수 있으니 버전을 맞우는것이 중요하며 아래 순서도 중요합니다.

jquery를 이용하기 때문에 jquery-ui가 아래에 있어야 한다는 것입니다.


그리고 jquery-ui 압축 파일을 받으면 아래와 같이 CDN 이용하지 않고 사이트에 올려 놓고 사용할 수 있으며 압축 파일 안에 아래 cdn 링크 걸린 모든 파일과 더불어 필요한 다른 파일들도 같이 모두 들어 있습니다. 같이 사용되는 jquery 도 별도 디렉토리에 있습니다.


△ 아래 달력 datepicker(데이트티커)

minDate 사용하면 적용한 이전의 날짜는 선택 할 수 없도록 나오지 않습니다.




  <!doctype html>
  <html lang="ko">
  <head>
  <meta charset="euc-kr">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jquery datepicker</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

  <!-- https://jqueryui.com/     -->
  <!--

  소스보기 하면 아래 js 파일 위치를 얻을 수 있다.
  -->
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script language='Javascript'>
    $.datepicker.setDefaults({
      dateFormat: 'yy-mm-dd',
      prevText: '이전 달',
      nextText: '다음 달',
      monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
      monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
      dayNames: ['일', '월', '화', '수', '목', '금', '토'],
      dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'],
      dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
      showMonthAfterYear: true,
      yearSuffix: '년',
      showButtonPanel: true,
      currentText: '당일 날짜' ,
      closeText: '닫기',
      minDate: new Date(2020, 0, 1)
    });

    $(function() {
      $("#date_text1, #date_text2").datepicker();
    });

  </script>
    </head>
  <body>

  <div class="container">
    <div class="row">
      <div class="col-12">
        <br><br><br>
      </div>
    </div>

    <form class="row g-3" action='<?=$PHP_SELF?>' method='get'>
      <div class="col-5">
      <p>
        <label for="date_text1" class="form-label">시작일</label>
        <input type="text" class="form-control" id="date_text1" value="" name="date_text1" autocomplete="off" placeholder="시작일">

        <label for="date_text2" class="form-label">종료일</label>
        <input type="text" class="form-control" id="date_text2" value="" name="date_text2" autocomplete="off" placeholder="종료일">
      </p>
      </div>
      <div class="col-1">
      <input  class="btn btn-primary" type="submit" value="결과 조회">
      </div>
      <div class="col-6">
      </div>
    </form>

    <div class="row">
      <div class="col-12">
        <br><br>
      </div>
    </div>

  </div>

  </body>
  </html>
 
  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
전체 96건 1 페이지
  • profile_image Node Express는 Node.js와 Express.js를 결합하여 웹 애플리케이션 개발에 사용되는 프레임워크입니다. 이를 통해 비동기적인 서버 측 코드 작성과 HTTP 요청 및 응답 처리 등 다양한 웹 개발 작업을 보다 쉽게 처리할 수 있습니다.  1) 간단하게 띄울 프로그램을 하나 준비 서버가 잘 작동하는지 확인을 할 수 있는 간단한 프로그램을 준비 하도록 합니다.자신이 하는것이 디비커넥션이 들어가게 되면 이 부분도 간단하게 CRUD 프…
  • profile_image -g 옵션을 주어 글로벌로 설치한것이 아닌데 현재 디렉토리에 node_modules이 없고 다른곳에 설치 된경우는 아래처럼 초기화하면 package.json 파일이 생성 되고 현재 디렉토리에 node_modules 디렉토리가 생기면서 설치 됩니다.아래와 같이 초기화 후 설치 하면 됩니다.  npm init -y  npm install express 그리고 초기화 했는데 안되는 경우는 시스템 로그인할때 홈 디렉토리나 또는 기본적으로 있어야할 스크…
  • profile_image 실제 파일은 있는데 없는다는 메시지가 나올 경우는 PATH 설정 값을 확인해 봐야 합니다.만약 whereis env 했는데 있다면 로그인할 때 실행되는 파일에 PATH 설정을 추가해 주면 됩니다./usr/local/nodejs/bin/npm install yarn/usr/bin/env: node: 그런 파일이나 디렉터리가 없습니다위와 같은 오류가 발생 하는 경우는 경로를 추가해 주면 된다.vim /etc/bashrcexport PATH=$PAT…
  • profile_image 프로그래머가 아니라 일반인이면 PDF 페이지번호 추가해주는 사이트가 있으니 아래를 참고하시면 됩니다.https://tools.pdf24.org/ko/add-page-numbers#s=1687481961009여기선 nodejs와 pdf-lib 설치에 대해선 언급하지 않습니다.아래는 간단한 소스 입니다.PDF파일에 페이지 번호가 없어서 인쇄하는데 있어 페이지수가 적으면 문제가 안되지만 수십페이지만 되어도 읽을때 문제가 될 수 있습니다. 페이지가 바…
  • profile_image chat GPT API를 통해서 물어본것에 대한 테스트 인데요.잘 되네요.별도의 모듈설치 없이 그냥 실행 되었습니다. 제가 전에 다른것 하면서 설치 되었는지는 확인 안해 봤습니다.  // zlib 모듈을 불러온다.  const zlib = require('zlib');  const fs = require('fs');  // 압축할 문자열  const str = '압축할 문자열';  // gzip으로 압축한다.  zlib.gzip(str, (er…
  • profile_image 파일저장이나 또는 가져올때등 상대경로로 호출 하는 경우도 있지만때론 전체 경로를 알아야 되는 경우가 있습니다.그럴때 현재 디렉토리 기준으로 처리하면 좋은때 이럴때 사용 합니다.  // 현재 디렉토리   const _DIR_   = process.cwd();  php의 __DIR__ 과 같은 역활 입니다.확인 결과 위 예제는 잘 되는 것입니다. 현재 V16 버전에서 문제 없었습니다.* 사용한곳은 아래 입니다. 파일을 저장할때 유용합니다.  [no…