bytech bytech - 3 months ago 26
jQuery Question

jquery ui datepicker range open date 2 automatic after date1 selected

I use JQuery ui datepicker range for booking check in - check out, i need that after user selected check in date the check out calendar will automatic open for choose date 2. I am using standard jQuery UI datepicker.

jQuery(function() {

var dateToday = new Date();

jQuery.datepicker.setDefaults({
defaultDate: '+1w',
changeMonth: true,
changeYear: false,
buttonImageOnly: true,
buttonImage: calendarUrl,
showOn: 'both',
numberOfMonths: 1,
dateFormat: 'dd/mm/yy',
minDate: dateToday
});
jQuery('#from').datepicker({onSelect: function() {
var date = jQuery(this).datepicker('getDate');
if (date) {
date.setDate(date.getDate() + 1);
}
jQuery('#to').datepicker('option', 'minDate', date);
}});
jQuery('#to').datepicker({onSelect: function() {
var date = jQuery(this).datepicker('getDate');
if (date) {
date.setDate(date.getDate() - 1);
}
//jQuery('#from').datepicker('option', 'maxDate', date);
}});
});

Answer

Try something like this with your on select method of 'from' datepicker.

Add this line after initialzing the 'to' datepicker

jQuery('#from').datepicker({
onClose: function(){
    var date = jQuery(this).datepicker('getDate');
    if (date) {
        date.setDate(date.getDate() + 1);
    }
    jQuery('#to').datepicker('option', 'minDate', date);
    jQuery('#to').datepicker('show');
}});