[Jquery] - 제이쿼리 Datepicker 달력 플러그인 사용법

#제이쿼리 Datepicker 달력 플러그인 사용법

 

 

#CDN

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

 

 

#등록 예시1

#html

<input type="text" name="sDate" id="sDate" title="시작일" maxlength="10">
<input type="text" name="eDate" id="eDate" title="종료일" maxlength="10">

 

#js

<script>
$(function(){
    // 날짜 세팅
    var date = new Date();
    // 디폴트 값
    var datepickerOption = {dateFormat:"yy-mm-dd", defaultDate: date};
    // 현재날짜 설정
    $("#sDate").val(getToday('yyyy-mm-dd'));
    $("#eDate").val(getToday('yyyy-mm-dd'));

    // 시작일, 종료일 최소/최대 범위 동적 체크
    $("sDate").datepicker(
    {
      dateFormat: "yy-mm-dd",
      defaultDate: date,
      onClose: function(selectedDate){
        if(selectedDate != ""){
          $("eDate").datepicker("option", "minDate", selectedDate);
        {
      }
    }
    );

    $("eDate").datepicker(
    {
      dateFormat: "yy-mm-dd",
      defaultDate: date,
      onClose: function(selectedDate){
        if(selectedDate != ""){
          $("sDate").datepicker("option", "maxDate", selectedDate);
        {
      }
    }
    );
})

    // 현재 날짜
    function getToday(type){
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth()+1;
      var day = date.getDate();
      if(month < 10){
        month = "0"+month;
      }
      if(day < 10){
        day = "0"+day;
      }

      var today = '';
      if(type == 'yyyy-mm-dd'){
        today = year + "-" + month + "-" + day;
      }else {
        today = year + "" + month + "" + day;
      }

      return today;
    }

</script>

 

 

#등록 예시2

#html

<div>
  <input type="text" name="dt" id="dateFrom" maxlength="10">
</div>

 

#js

<script>

    $(function(){
      fnDatepicker("#dateFrom");
      $("#dateFrom").val(getToday('yyyy-mm-dd'));
    })

    function fnDatepicker(selector){
	  $(selector).datepicker({
        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: '년'
      });
      $(selector).mask('0000-00-00');
      $(selector).attr("maxlength", "10");
    }

    // 현재 날짜
    function getToday(type){
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth()+1;
      var day = date.getDate();
      if(month < 10){
        month = "0"+month;
      }
      if(day < 10){
        day = "0"+day;
      }

      var today = '';
      if(type == 'yyyy-mm-dd'){
        today = year + "-" + month + "-" + day;
      }else {
        today = year + "" + month + "" + day;
      }

      return today;
    }

</script>

 

 

#조회 예시

#html

 

<label for="dateFrom">기간</label>
<div class="input-date">
  <input type="text" name="startDt" id="startDt" title="시작일" maxlength="10" th:value="${sDate}" readonly>
  <span>~</span>
  <input type="text" name="endDt" id="endDt" title="시작일" maxlength="10" th:value="${eDate}" readonly>
  <select id="dateCond">
    <option value="thisMonth" th:selected="${dateCond} == 'thisMonth'">이번달</option>
    <option value="lastWeek" th:selected="${dateCond} == 'lastWeek'">최근1주일</option>
    <option value="lastMonth" th:selected="${dateCond} == 'lastMonth'">최근30일</option>
    <option value="lastYear" th:selected="${dateCond} == 'lastYear'">최근1년</option>
    <option value="" th:selected="${dateCond} == ''">전체</option>
  </select>
</div>

 

#js

<script>
	$(function(){
      // 기간 세팅
      var date = new Date();
      var datepickerOption = {dateFormat: 'yy-mm-dd', defaultDate: date};
      
    $("startDate").datepicker(
    {
      dateFormat: "yy-mm-dd",
      defaultDate: date,
      onClose: function(selectedDate){
        if(selectedDate != ""){
          $("endDate").datepicker("option", "minDate", selectedDate);
        {
      }
    }
    );

    $("endDate").datepicker(
    {
      dateFormat: "yy-mm-dd",
      defaultDate: date,
      onClose: function(selectedDate){
        if(selectedDate != ""){
          $("startDate").datepicker("option", "maxDate", selectedDate);
        {
      }
    }
    );
      
    });

	// 기간 조건 변경
    $("#dateCond").on("change", function(){
      var today = new Date();
      var toDate = getToDate(today, 0);
      var fromDate;
      
      var y = today.getFullYear();
      var m = today.getMonth();
      var firstDay = new Date(y, m, 1);
      var lastDay = new Date(y, m + 1, 0);
      
      switch($(this).val()){
        case 'thisMonth':
          fromDate = firstDay;
          toDate = lastDay;
        break;
        
        case 'lastWeek':
          fromDate = getToDate(today, 7);
        break;
        
        case 'lastMonth':
          fromDate = getToDate(today, 30);
        break;
        
        case 'lastYear':
          fromDate = getToDate(today, 365);
        break;
        
        case '':
          fromDate = '1900-01-01';
          toDate = '9999-12-31';
        break;
        
        default: return;
      }
      
      $("#startDate").datepicker("option", "maxDate", toDate).datepicker("setDate", fromDate);
      $("#endDate").datepicker("option", "minDate", fromDate).datepicker("setDate", toDate);
    });
    
    //오늘 날짜
    function getToDate(date, days, delimiter = '-'){
      if(typeof days !== 'number') return;
      var to = new Date(date.getTime() - (days * 24 * 60 * 60 * 1000));
      var year = to.getFullYear();
      var month = togetMonth() + 1;
      var day = to.getDate();
      return [year,month,day].join(delimiter);
    }

</script>