jQuery UI Datepicker Add Days

Question

I\'m attempting to create something of range system for booking rooms on a hotel website and I\'m using jQuery UI Datepicker to allow the user to select their check in date.

Answer 1

You can update the value of the hidden field in the onSelect events for the arrivalDate datepicker.

$('#arrivalDate').datepicker({
    onSelect: function(dateStr) {
        var nights = parseInt($('#numOfNights').val());
        var depart = $.datepicker.parseDate('mm/dd/yy', dateStr);
        depart.setDate(depart.getDate() + nights);
        $('#departureDate').val(depart);
     }
});

You'll have to also update the departureDate field from the change event of the numOfNights field.

$('#numOfNights').change(function() {
        var nights = parseInt($('#numOfNights').val());
        var depart = $.datepicker.parseDate('mm/dd/yy', $('#arrivalDate').val());
        depart.setDate(depart.getDate() + nights);
        $('#departureDate').val(depart);
});

Try it out here: http://jsfiddle.net/JKGvD/

You'd probably want to make that a function and also use it to initialize the departureDate if your arrivalDate has an initial value.