jquery datetimepicker vs jquery-ui datepicker (날짜표시 기능 사용 예시)

jQuery

 

See the Pen jquery datetimepicker vs jquery-ui datepicker (날짜표시 기능 사용 예시) by kimyangsun (@kimyangsun) on CodePen.

 

jquery datetimepicker vs jquery-ui datepicker (날짜표시 기능 사용 예시) 코드펜 소스코드입니다.

input에 날짜를 표시하는 자바스크립트 제이쿼리 플러그인중에 가장 많이 쓰인다는 두가지를 각각 사용한 예제입니다.

 

각각 장단점이 있는거 같은데 기능은 비슷하니까 둘중 선택해서 사용하시면 좋을 거 같습니다. :)

 

// 제이쿼리 datetimepicker
$(function(){
  $.datetimepicker.setLocale('kr');
  $('.datetimepicker').datetimepicker({
      format:'Y-m-d H:i'
  });

  // 시작일, 종료일 적용 버전
  let startDate = $('.start-date').datetimepicker();
  let endDate = $('.end-date').datetimepicker();
  startDate.datetimepicker({
      // datepicker : false,
      //timepicker: false,
      format: 'Y-m-d H:i',
      //format : 'H:i',
      scrollMonth: false,
      scrollInput: false,
      onShow: function (ct, $i) {
          this.setOptions({
              maxDate: endDate.val() ? endDate.val() : false
          })
      },
      onClose: function (ct, $i) {
          if (!endDate.val()) {
              endDate.val($i.val());
          }
      }
  });

  endDate.datetimepicker({
      // datepicker : false,
      //timepicker: false,
      format: 'Y-m-d H:i',
      //format : 'H:i',
      scrollMonth: false,
      scrollInput: false,
      onShow: function (ct) {
          this.setOptions({
              minDate: startDate.val() ? startDate.val() : false
          })
      },
      onClose: function (ct, $i) {
          if (!startDate.val()) {
              startDate.val($i.val());
          }
      }
  });
})


// 제이쿼리 UI datepicker
$(function($){
    $.datepicker.regional["ko"] = {
        closeText: "닫기",
        prevText: "이전달",
        nextText: "다음달",
        currentText: "오늘",
        monthNames: ["1월(JAN)","2월(FEB)","3월(MAR)","4월(APR)","5월(MAY)","6월(JUN)", "7월(JUL)","8월(AUG)","9월(SEP)","10월(OCT)","11월(NOV)","12월(DEC)"],
        monthNamesShort: ["1월","2월","3월","4월","5월","6월", "7월","8월","9월","10월","11월","12월"],
        dayNames: ["일","월","화","수","목","금","토"],
        dayNamesShort: ["일","월","화","수","목","금","토"],
        dayNamesMin: ["일","월","화","수","목","금","토"],
        weekHeader: "Wk",
        dateFormat: "yymmdd",
        firstDay: 0,
        isRTL: false,
        showMonthAfterYear: true,
        yearSuffix: ""
    };
    $.datepicker.setDefaults($.datepicker.regional["ko"]);
});

$(function() {
    $("#datepicker1").datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: "yy-mm-dd",
        showButtonPanel: true,
        yearRange: "c-99:c+99",
        maxDate: "+1000d"
    });
});