JQuery UI Datepicker Add Days

Question

I am trying to create something from a range system for booking rooms on a hotel website and I am using jQuery UI Datepicker so that the user can select a check date. What I want to do then is create another field in which simply “Number of nights” and jQuery Datepicker take the date of verification, add the number of nights and set the final date as the value of the hidden input (in the correct date format). It will look something like this:

<input type="text" name="arrivalDate" class="datepicker">
<input type="text" name="numOfNights">
<input type="hidden" name="departureDate" value="arrivalDate + number of nights">

Is it possible? Thanks in advance.

(Note: The database I get from this form is a bit temperamental, and I don’t have access to it outside of a few of the values ​​available for the request.)

Answer 1

The above can be achieved with the 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 2

You can update the value of the hidden field in onSelect events for datepateer dateDate.

$('#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 also need to update the departureDate field from the numOfNights field change event.

$('#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 here: http://jsfiddle.net/JKGvD/

You will probably want to make this function and use it to initialize DepartAdate if your arrival has an initial value.

Answer 3

setDate.

SETDATE

:     .datepicker( "setDate", )

Sets the current date for a DatePicker. The new date can be an object date or a string in the current date format (for example, '01 / 26/2009 '), the number of days from today (for example, +7) or a string of values ​​and periods (' y 'for years, "m" for several months, “w” for several weeks, 'd' for several days, for example. '+ 1m + 7d'), or null to clear the selected date.