Question

我有一个预订表，其中包含登记入住，住宿和休息时间

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

（如果登记入住时间为08/08/19，并且用户选择4晚，则结帐时间为19/08/18）

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

我已经做了从选择晚上到提交结帐的更改

$( ".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解决方案：想法：以表格的形式获取日期，获取时间戳，进行比较并以天为单位转换毫秒。

使用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);
                }
            })

在日期选择器字段中设置选择选项字段的值

3 个答案: