从日期选择器字段中设置选择选项字段的值答案

【问题标题】：set a value of select option field from the datepicker field从日期选择器字段中设置选择选项字段的值
【发布时间】：2019-12-16 04:27:53
【问题描述】：

我有一张包含入住、住宿和退房的预订表格

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

（如果入住时间为 19 年 8 月 8 日，并且用户选择 4 晚，则结账时间为 19 年 8 月 12 日）

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

我已经完成了从夜间选择到结帐提交的更改

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

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

我的问题是晚上的结帐字段

我需要以某种方式计算结帐日期减去入住日期并在选择字段中设置晚数

【问题讨论】：

标签： javascript jquery datepicker jquery-ui-datepicker

【解决方案1】：

尝试使用 momentjs 库，会是这样的

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

【讨论】：

【解决方案2】：

如果您操作大量日期，我建议您使用 moment. 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">

【讨论】：

【解决方案3】：

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

如果您的结帐日期字段小于您的签入日期字段，那么它会将 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);
                }
            })

【讨论】：