在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);
                }
            })