daterangepicker 두 개의 다른 입력

나는 두 개의 입력에서 또는 하나만 가질 필요가 있기 때문에 동일한 형식의 두 개의 다른 daterangepicker가 있습니다. 따라서 클래스 선택기로 이것을 초기화합니다 : $ ('. daterange'). daterangepicker ({});daterangepicker 두 개의 다른 입력

everithing 완벽하게 작동하지만 두 가지를 모두 변경하고 싶습니다. 첫 번째 범위에서 범위를 선택하면 두 번째 열 때 일정과 동일한 범위가 선택됩니다. 그래서 나는 오프 쇼 이벤트에서 그것을하려고 노력하고있다.

$('.daterange').daterangepicker() 
.on('apply.daterangepicker' ,function(ev, picker) { 
$('.scheduledStartGmt').val(picker.startDate.format(picker.format)).change(); 
$('.scheduledEndGmt').val(picker.endDate.format(picker.format)).change(); 
}) 
.on('show.daterangepicker' ,function(ev, picker){ 

$('.daterange').data('daterangepicker').setStartDate($('.scheduledStartGmt').val()); 
$('.daterange').data('daterangepicker').setEndDate($('.scheduledEndGmt').val()); 

});

단지 첫번째 것을 바꾼다. 내가 어떻게 해?

내가 솔루션 같은 문제에 직면하지만, 발견 된

출처

2017-09-22 Elena Martín Castillo

그래서 두 번째 기간 선택 도구가 읽기 전용입니까? –

두 번째 datepicker에 첫 번째 날짜의 값을 넣는 것이 어떻습니까? –

아니요, 저는 두 개의 입력이 StartDate이고 두 번째 입력이 EndDate입니다. 범위는 두 날짜 사이이지만 두 개 중 하나를 클릭하여 편집 할 수 있습니다. 이 웹의 daterangepicker와 같습니다 : https://www.booking.com –

이 당신을 도울 수 있습니다

if($('#search_checkin, #search_checkout').length){ 
    // check if element is available to bind ITS ONLY ON HOMEPAGE 
    var currentDate = moment().format("DD-MM-YYYY"); 

    $('#search_checkin, #search_checkout').daterangepicker({ 
     locale: { 
       format: 'DD-MM-YYYY' 
     }, 
     "alwaysShowCalendars": true, 
     "minDate": currentDate, 
     "maxDate": moment().add('months', 1), 
     autoApply: true, 
     autoUpdateInput: false 
    }, function(start, end, label) { 
     // console.log("New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')"); 
     // Lets update the fields manually this event fires on selection of range 
     var selectedStartDate = start.format('DD-MM-YYYY'); // selected start 
     var selectedEndDate = end.format('DD-MM-YYYY'); // selected end 

     $checkinInput = $('#search_checkin'); 
     $checkoutInput = $('#search_checkout'); 

     // Updating Fields with selected dates 
     $checkinInput.val(selectedStartDate); 
     $checkoutInput.val(selectedEndDate); 

     // Setting the Selection of dates on calender on CHECKOUT FIELD (To get this it must be binded by Ids not Calss) 
     var checkOutPicker = $checkoutInput.data('daterangepicker'); 
     checkOutPicker.setStartDate(selectedStartDate); 
     checkOutPicker.setEndDate(selectedEndDate); 

     // Setting the Selection of dates on calender on CHECKIN FIELD (To get this it must be binded by Ids not Calss) 
     var checkInPicker = $checkinInput.data('daterangepicker'); 
     checkInPicker.setStartDate(selectedStartDate); 
     checkInPicker.setEndDate(selectedEndDate); 

    }); 

} // End Daterange Picker

당신이 내가 설명하려는 경우 알려 주시기 바랍니다 :

는 내 코드에서 보라.

출처

2017-12-05 12:30:22

FYI, 나는 또한 위의 코드에서 날짜와 함께 놀기 위해 moment.js를 포함 시켰습니다. –

daterangepicker 두 개의 다른 입력

답변

관련 문제