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

Question

我有一个包含签到，住宿和退房的预订表格

用户选择chckin日期，然后选择入住天数，它反映在结帐字段日期上

（如果签到时间为08/08/19，并且用户选择4晚，则结帐时间为19/08/19）

现在..我想要的是，如果用户更改结帐日期，它反映在nights值上

我已经做了从选择夜晚到结帐的更改

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

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

我遇到的麻烦是晚上的结帐字段

我需要以某种方式计算出结帐日期减去签入日期的时间，并在选择字段中设置住宿天数

Answer 1

尝试使用momentjs lib，它将是这样的

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

Answer 2

如果您要约会很多，我建议您使用时刻。 FullCalendar等其他一些库已在使用它。

jQuery解决方案：想法：以您的形式获取日期，获取时间戳，进行比较并以天为单位转换ms。

使用Math.round获取int和Math.abs（）始终获取正数。

 $(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

在这里，我提供了当我们使用带有日期和数学功能的简单jquery代码更改结帐日期字段时，设置Nights字段的代码。

如果您的退房日期字段小于您的入住日期字段，则它将把Nights字段设置为0并显示带有错误消息的控制台日志。

$(".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);
                }
            })