javascript - 在 JavaScript 中的日期选择器上设置 minDate

Question

我正在尝试使用用户从另一个日期选择器中选择的日期(即 checkin / checkout 日期)来设置日期选择器的 minDate。

这是我的代码:

var checkin = document.getElementById('check-in');
var checkout = document.getElementById('check-out');

var dateField;

$('#check-in').datepicker({
  onSelect: function (date) {
    dateField = $(this).val();
    console.log(date);
  },
  altField: '#actual-checkin-date',
  altFormat: 'mm/dd/yy',
  dateFormat: 'dd/mm/yy',
  minDate: 0
});

$('#check-out').datepicker({
  altField: '#actual-checkout-date',
  altFormat: 'mm/dd/yy',
  dateFormat: 'dd/mm/yy',
  minDate: new Date(dateField)
});

checkin.onclick = function () {
  $('#check-in').datepicker();
};

checkout.onclick = function () {
  $('#check-out').datepicker();
  console.log($('#check-out').datepicker("option", "minDate"));
}

我可以正确记录入住日期选择器的日期，但无法将该日期设置为退房日期选择器的 minDate。最后一个日志(最后一个数据选择器中的日志)显示“无效日期”，而第一个数据选择器中的日志显示 dd/mm/yy 格式的日期。

我做错了什么？

感谢您的帮助!

Answer 1

您在这里遇到两个问题: 1)当您创建 checkout 日期选择器时，您的数据字段尚未定义(一旦您在 checkin 日期选择器中选择数据，它就会被设置)

2) 您没有创建有效的日期 - 您可以使用 $('#check-in').datepicker("getDate") 访问日期选择器的日期

看看这个 fiddle :http://jsfiddle.net/nerL43s5/看看它的实际效果。

$('#check-in').datepicker({
  onSelect: function(date) {
    console.log(date );
    // now you have a date you can set as the minDate:
    $('#check-out').datepicker('option', 'minDate', $('#check-in').datepicker('getDate'));
    console.log($('#check-out').datepicker('option', 'minDate'));
  },
  altField: '#actual-checkin-date',
  altFormat: 'mm/dd/yy',
  dateFormat: 'dd/mm/yy',
  minDate: 0
});