在datepicker字段中设置选择选项字段的值

Question

i have a booking form with checkin, nights, and chckout

the user select chckin date, and after that he choose number of nights, its reflect on the checkout field date

(if the checkin is to 08/08/19 and the user select 4 nights the checkout will be 12/08/19)

now.. what i want is if the user change the checkout date its reflect on the nights value

i already did the change from the nights select to checkout filed

$( ".nights" )
 .change(function () {

    $( this ).each(function() {
      var nights = $('.nights-field').val();
      var nightsVAr = "+" + nights + "d";
      $( ".checkout-field" ).datepicker().datepicker("setDate", nightsVAr);
    });
   })
   .change();

what i have truble with is the checkout field to nights

i need to calculate somehow the date of checkout minus the checkin and set the number of nights in the select field

Answer 1

try to use momentjs lib, it will be something like this

var from = moment(fromDate);
var to = moment(toDate);
var nights =from.diff(to, 'days')

Answer 2

If you manipulate a lot of date I recommend using moment. Some other libraries as FullCalendar already use it.

Jquery solution : Idea : getting the date in your form, gettings it timestamps, do the diff and convert the ms in day unit.

Using Math.round to get a int & Math.abs() for getting always a positive number.

 $(document).ready(() => { var arrival = $("input#arrival"); var departure = $("input#departure"); var msInDay = 1000 * 60 * 60 *24; // number of ms in a day; $("input[type='date']").change(() => { if (arrival.val() && departure.val()) { dateArrival = new Date(arrival.val()); dateDeparture = new Date(departure.val()); var days = Math.round(Math.abs((dateArrival.getTime() - dateDeparture.getTime())) / (msInDay)); // getting time stamps of each date. console.log("nights :" +days); } }) }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="date" id="arrival"> <input type="date" id="departure"> 

Answer 3

Here I provide code which set nights field when we change checkout date field with simple jquery code with date and math function.

If your checkout date field is less than your checkin date field, then it will set nights field as 0 and show console log with error message.

$(".checkout-field")
            .change(function () {
                var nights = $('.nights-field').val();
                var checkInDate = new Date($(".checkin-field").val());
                var checkOutDate = new Date($(".checkout-field").val());
                if(checkOutDate <= checkInDate) {
                    console.log("error dates are not valid");
                    $(".nights-field").val(0);
                }
                else {
                    var diffDate = checkOutDate - checkInDate;
                    var days = Math.floor(((diffDate % 31536000000) % 2628000000)/86400000);
                    $(".nights-field").val(days);
                }
            })