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.

Answer 2

The above can be achieved by following code -

 $('input[name="arrivalDate"]').datepicker({

     //your other configurations.     

     onSelect: function(){
     var start = $('input[name="arrivalDate"]').val();
     var nights = $('input[name="numOfNights"]').val();
     var date = new Date(start);
     var d = date.getDate();
     var m = date.getMonth();
     var y = date.getFullYear();
     var edate= new Date(y, m, d+nights);
     $('input[name="departureDate"]').val(edate);
    }
 });

Answer 3

Use the setDate function.

setDate

Signature: .datepicker( "setDate" , date )

Sets the current date for the datepicker. The new date may be a Date object or a string in the current date format (e.g. '01/26/2009'), a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +7d'), or null to clear the selected date.