Jquery datepicker From - 到禁用日期的字段答案

【问题标题】：Jquery datepicker From - To fields with disabled daysJquery datepicker From - 到禁用日期的字段
【发布时间】：2018-01-21 16:30:12
【问题描述】：

我有 2 个带日期选择器的输入字段：

    $('#dpd1').datepicker();
    $('#dpd2').datepicker();

是否可以让第二个字段依赖于第一个字段？

例如，我不会在第一个字段中选择日期“2018-01-15”，而不是隐藏 datepicker 日历，而是专注于第二个字段，该字段应仅启用第一个字段的天数 + 1 天（“2018-01-16”及更高）。

我找到了这个脚本：

if(jQuery('#dpd1').length){
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);

var checkin = $('#dpd1').datepicker({
  onRender: function(date) {
    return date.valueOf() < now.valueOf() ? 'disabled' : '';
  }
}).on('changeDate', function(ev) {
  if (ev.date.valueOf() > checkout.date.valueOf()) {
    var newDate = new Date(ev.date)
    newDate.setDate(newDate.getDate() + 1);
    checkout.setValue(newDate);
  }
  checkin.hide();
  $('#dpd2')[0].focus();
}).data('datepicker');
var checkout = $('#dpd2').datepicker({
  onRender: function(date) {
    return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
  }
}).on('changeDate', function(ev) {
  checkout.hide();
}).data('datepicker');
  }

但我无法为我的目的自定义此脚本。这里有人可以帮助我吗？谢谢。

【问题讨论】：

我不知道您是否正在使用或计划在您的项目中使用 Bootstrap，但是有一个名为 Bootstrap-datetimepicker 的组件非常适合日期/时间选择，它具有与您完全相同的功能'正在寻找。它是内置的，几乎不需要任何代码，只需配置。你可以在这里找到它：Bootstrap-datetimepicker。当然，它也使用 JQuery。

标签： jquery datepicker dependencies field

【解决方案1】：

我找到了解决方案：

if(jQuery('#dpd1').length){

var checkin = $('#dpd1').datepicker({

}).on('changeDate', function(ev) {

    var newDate = new Date(ev.date)
    newDate.setDate(newDate.getDate() + 1);
    checkout.setValue(newDate);

  checkin.hide();
  $('#dpd2')[0].focus();
}).data('datepicker');
var checkout = $('#dpd2').datepicker({
  onRender: function(date) {
    return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
  }
}).on('changeDate', function(ev) {
  checkout.hide();
}).data('datepicker');
}

【讨论】：