통합검색

Javascript

[jQuery] datepicker 로 check in/out 구현하기

  • 2024.07.20 10:38:08


여행, 예약사이트에서 흔히 볼 수 있는 check in/out 을 jQuery UI의 Datepicker로 구현하는 방법을 안내한다.
input 두개를 만들어 각각 datepicker 가 트리거 되도록 하여 구현한다.


[!]HTML[/!] 
check in 과 out input 두개를 만든다.
 
<input type="text" datepicker checkin>
<input type="text" datepicker checkout>


[!]jQuery[/!] 
각 input에 대해 아래와 같은 옵션으로 datepicker 를 적용한다.
  
// check in/out

let datepicker_checkin = $('input[datepicker][checkin]').datepicker({
    dateFormat: 'yy-mm-dd',
    minDate: 0,
    onSelect: function(selectedDate) {
        let $this = $(this);
        let date = $(this).datepicker('getDate');

        date.setDate(date.getDate()); // 당일치기도 가능한 경우
        // date.setDate(date.getDate() + 1); // 무조건 1박 이상 가능한 경우

        datepicker_checkout.datepicker("option", "minDate", date);

        // check in 날짜 선택하는 경우 자동으로 check out Datepicker를 띄움
        setTimeout(function() {
            $this.parent().find('input[datepicker][checkout]').datepicker('show');
        }, 10);
    }
});

let datepicker_checkout = $('input[datepicker][checkout]').datepicker({
    dateFormat: "yy-mm-dd",
    minDate: 1
});




 
리스트