I have two different daterangepicker in the same form, because I need to have it in two inputs nor only in one.. So I initialize this with a class selector: $('.daterange').daterangepicker({});
everithing works perfect, but I want to do change two both. If I select a range in the first one, when I open the second one I want to have the same range selected in the calendars. So I'm trying to do it in ON SHOW event
$('.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());
});
Only changes the first one. How can I do it?
i was facing the same problem but found the Solution, this may help you:
Have a look at my 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
please let me know if you want me to explain.