daterangepicker zwei verschiedene Eingänge

Question

Ich habe zwei verschiedene Datumsbereiche in der gleichen Form, weil ich es in zwei Eingängen oder nur in einem haben muss. Also initialisiere ich das mit einem Klassenselektor: $ ('. Datarange'). Datumsrangierer ({});

Everithing funktioniert perfekt, aber ich möchte zwei beide ändern. Wenn ich einen Bereich in dem ersten auswähle, wenn ich den zweiten öffne, möchte ich, dass der gleiche Bereich in den Kalendern ausgewählt wird. So versuche ich es in ON SHOW Ereignis

$('.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()); 

}); 

Nur ändert sich die erste. Wie kann ich es tun?

Answer 1

war ich vor dem gleichen Problem, sondern die Lösung gefunden, das Ihnen helfen kann:

Werfen Sie einen Blick auf mein Code:

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 

lassen Sie es mich wissen, wenn Sie wollen, dass ich zu erklären.