Jquery datetimepicker 기본 설정

웹 화면을 구현하면서 날짜뿐만이 아니라 시간까지 필요할때가 있다.

 

이때 jquery의 datetimepicker 라이브러리를 사용한다.

 

환경구성은 Spring Boot + Thymeleaf 템플릿 엔진 + jquery 사용

 

1. 다운로드 위치

https://xdsoft.net/jqplugins/datetimepicker/

DateTimePicker

 

 

메인화면에서 Download를 클릭하여 다운받는다.

 

2. 필요한 파일 import

압축파일을 풀어 필요한 파일만 html에 import 한다.

압축파일 경로의 build > jquery.datetimepicker.full.min.js, jquery.datetimepicker.min.css 파일 추가

 

"th:" 문법은 Thymeleaf 템플릿 엔진의 문법이다.

 

3. html에서 datetimepicker 에서 사용할 태그 추가

<li class="">
    <input type="text" th:id="dateStart" th:name="dateStart" class="date-start" readonly="readonly" />
</li>
<li class="unit"> ~ </li>
<li class="">
    <input type="text" th:id="dateEnd" th:name="dateEnd" class="date-end" readonly="readonly" />
</li>

중요한 태그는 input type="text" id="dateStart 와 id="dateEnd" 이다.

 

4. js에서 datetimepicker 설정 추가

$("#dateStart").datetimepicker({
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    format:'Y-m-d H:i',
    step: 1,
    defaultSelect: false,
    defaultDate: false,
    onClose: function(ct, $i) {
        let endDateInput = $("#dateEnd");
        if($("#dateEnd").val() != ''){
            let tempStartDate = new Date(ct);
            let tempEndDate = new Date(endDateInput.val());
            if(tempStartDate > tempEndDate){
                endDateInput.val(getFormatDateTime(ct));
            }
        }else {
            endDateInput.val(getFormatDateTime(ct));
        }
    },
    onSelectDate: function(ct, $i){
        $("#dateEnd").datetimepicker('setOptions', { minDate: ct });
        $("#dateEnd").datetimepicker('setOptions', { minTime: ct });
    },
    onSelectTime: function(ct, $i){
        $("#dateEnd").datetimepicker('setOptions', { minDate: ct });
        $("#dateEnd").datetimepicker('setOptions', { minTime: ct });
    }
});

$("#dateEnd").datetimepicker({
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    format:'Y-m-d H:i',
    step: 1,
    defaultSelect: false,
    defaultDate: false,
    onClose: function(ct, $i) {
        let startDateInput = $("#dateStart");
        if($("#dateStart").val() != ''){
            let tempStartDate = new Date(startDateInput.val());
            let tempEndDate = new Date(ct);
            if(tempStartDate > tempEndDate){
                startDateInput.val(getFormatDateTime(ct));
            }
        }else {
            startDateInput.val(getFormatDateTime(ct));
        }
    },
    onSelectDate:function( ct, $i ){
        $("#dateStart").datetimepicker('setOptions', { maxDate: ct });
        $("#dateStart").datetimepicker('setOptions', { maxTime: ct });
    },
    onSelectTime:function( ct, $i ){
        $("#dateStart").datetimepicker('setOptions', { maxDate: ct });
        $("#dateStart").datetimepicker('setOptions', { maxTime: ct });
    },
});

* step : 몇분단위로 시간을 설정할것인가 설정

* onSelectDate : 날짜를 선택했을 때의 이벤트

     => 보통 시작날짜의 maxDate(최대 선택날짜)나 종료날짜의 minDate(최소 선택날짜)를 설정하기 위해 사용

* onSelectTime : 시간을 선택했을 때의 이벤트

* onClose : datetimepicker 달력창을 닫았을 때의 이벤트

    => 창을 닫았을 때 시작날짜 또는 종료날짜가 있을 경우 데이터 체크를 한다. 시작날짜를 선택했을 때 종료날짜보다

         더 빠를 경우 종료날짜를 시작날짜로 변경해준다. 종료날짜도 마찬가지로 시작날짜보다 늦을 경우 시작날짜를

         종료날짜로 변경해준다.

 

onSelectDate와 onSelectTime에 maxDate와 maxTime을 모두 적어놓은 이유는 시간만 선택했을때를 대비해 모두 적어놓았다.

 

5. datepicker 선택된 날짜 불러오기

// datepicker 선언
$("#dateEnd").datetimepicker({...옵션};

// datepicker 선택된 값 불러오기 (1.13 jquery UI datepicker 기준)
let selectDate = $("#dateEnd").datetimepicker("getDate");

 

정확한 옵션을 확인하기 위해선 아래 페이지의 하단으로 내리면 Full options list 가 있다.

https://xdsoft.net/jqplugins/datetimepicker/

DateTimePicker