jQuery - 尝试将文本字段值添加到 Datepicker答案

【问题标题】：jQuery - attempting to add text field value to DatepickerjQuery - 尝试将文本字段值添加到 Datepicker
【发布时间】：2018-01-24 22:22:48
【问题描述】：

我正在尝试创建一个表单，用户可以使用 Datepicker 选择他们的入住日期，然后有一个文本字段，他们可以在其中输入晚数。

输入晚数后，我需要将晚数添加到 Datepicker 中选择的原始日期和我的结帐字段中反映的新日期。

我发现了一个类似的问题，开发人员每次只需要增加 3 个晚上。所以我使用了该代码并尝试修改它以添加我的 nights.value。但是，当我在该字段中输入值时，我得到的日期不正确。例如，如果我选择日期 01/10/2018，然后在 nights 字段中添加 1，则我得到的退房日期值为 2018 年 3 月 11 日。

这是我的代码：

$(document).ready(function () {
  $('#checkin').datepicker({dateFormat: "mm/dd/yy" });
  $('#checkout').datepicker({dateFormat: "mm/dd/yy" });
});

function getdate() {
  var tt = document.getElementById('checkin').value;
  var date = new Date(tt);
  var newdate = new Date(date);

  newdate.setDate(newdate.getDate() + document.getElementById('nights').value);
  var dd = newdate.getDate();
  var mm = newdate.getMonth();
  var y = newdate.getFullYear();

  var FormattedDate = mm + '/' + dd + '/' + y;
  document.getElementById('checkout').value = FormattedDate;
}

有人可以帮帮我吗？我确信很明显我对 jQuery 不是很了解。所以任何帮助将不胜感激。谢谢！

【问题讨论】：

标签： jquery jquery-ui datepicker jquery-ui-datepicker

【解决方案1】：

datepicker API 让您可以直接从 datepicker 实例获取日期对象并设置日期

以下设置是通过更改这两者中的一个来修改夜晚和结帐，并且应该为您提供一个坚实的开始，让您开始滚动。

Link to sandbox demo to play with modifications in real time

$(function() {

  var $in = $('#checkin').datepicker({
    dateFormat: "mm/dd/yy",
    minDate: 0 // today
  })

  // set checkin date for demo to now 
  $in.datepicker("setDate", new Date());


  var $out = $('#checkout').datepicker({
    dateFormat: "mm/dd/yy",
    minDate: 1, // tomorrow
    onSelect: function() {
      var inDate = $in.datepicker('getDate');
      var outDate = $(this).datepicker('getDate');
      var nights = (outDate - inDate) / (60 * 60 * 24 * 1000);// todo math rounding to prevent decimal
      $('#nights').val(nights)
    }
  });

  $('#nights').on('change', function() {
    var inDate = $in.datepicker('getDate');
    // create new date object from inDate
    var outDate = new Date(inDate);
    // add days 
    outDate.setDate(inDate.getDate() + +this.value);
    // set datepicker date
    $out.datepicker("setDate", outDate)

  })
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<p>In:
  <input type="text" id="checkin">
</p>
<p>Out:
  <input type="text" id="checkout">
</p>
<p>Nights:
  <input type="number" id="nights">
</p>
<h4>Toggle nights to set out date , toggle out date to set nights</h4>

【讨论】：