jQuery Date Picker - 如果用户没有选择开始日期，则禁用所有结束日期答案

【问题标题】：jQuery Date Picker - disable all end dates if user has not select start datejQuery Date Picker - 如果用户没有选择开始日期，则禁用所有结束日期
【发布时间】：2018-03-23 12:14:41
【问题描述】：

在我的日期选择器中，我有一些限制

结束日期不应早于开始日期 - 完成
现在我的问题是用户不应该选择结束日期而不选择开始日期

我的日期选择器 Jquery：

var dateToday = new Date(); 
$( function() {
  $( "#datepicker1" ).datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat:'dd-M-yy',
    //   minDate: dateToday,
    onClose: function (selected) {
      $("#end").datepicker("option", "minDate", selected);
    }
  });
  $( "#end" ).datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat:'dd-M-yy',
    // minDate: dateToday,
    onClose: function (selected) {
      $("#datepicker1").datepicker("option", "maxDate", selected);
    }
  });
});

【问题讨论】：

jQuery: enabling/disabling datepicker的可能重复
非常感谢您的回复，如何在不影响我之前的代码的情况下使用它
默认禁用第二个日期选择器，如果选择了日期值，则在第一个日期选择器的onClose事件处理程序中启用。
是的，我最初禁用了，但我无法启用

标签： jquery datepicker

【解决方案1】：

查看变化：

onClose: function (selected) {
  if(selected.length <= 0) {
      // selected is empty
      $("#end").datepicker('disable')
  } else {
      $("#end").datepicker('enable');
  }
  $("#end").datepicker("option", "minDate", selected);
}

这里的演示给你一个想法。根据您的需要采用。

var dateToday = new Date(); 
$( function() {
  $( "#datepicker1" ).datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat:'dd-M-yy',
    //   minDate: dateToday,
    onClose: function (selected) {
      if(selected.length <= 0) {
          // selected is empty
          $("#end").datepicker('disable');
      } else {
          $("#end").datepicker('enable');
      }
      $("#end").datepicker("option", "minDate", selected);
    }
  });
  $( "#end" ).datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat:'dd-M-yy',
    // minDate: dateToday,
    onClose: function (selected) {
      if(selected.length <= 0) {
          // selected is empty
          $("#datepicker1").datepicker('disable');
      } else {
          $("#datepicker1").datepicker('enable');
      }
      $("#datepicker1").datepicker("option", "maxDate", selected);
    }
  });
});

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.4/datepicker.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/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>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>



<input id="datepicker1" type="text">
<input id="end" type="text">

【讨论】：

非常感谢它的完美运行
哦，你的回答更快更好；）

【解决方案2】：

首先你应该默认禁用#end datepicker。然后修改#datepicker1的onClick处理程序如下：

onClose: function (selected) { 
  $("#end")
    .datepicker("option", "minDate", selected)
    .datepicker("option", "disabled", !selected);
}

【讨论】：

工作完美，如果我选择开始日期，那么只有我的结束日期启用，一旦我选择两者，我将删除开始日期，现在结束日期再次禁用，但它包含最新选择的值
@Vishnu ，我忘了开始日期可能会被删除。当开始日期将被删除时，我已更新代码以再次锁定结束日期选择器。