Question

我尝试创建一个表单，用户可以使用Datepicker选择他们的签到日期，然后有一个文本字段，用于输入夜晚。

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

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

这是我的代码：

$(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知之甚少。所以任何帮助将不胜感激。谢谢！

Answer 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>

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

1 个答案: