jQuery 日期选择器 - 如果用户未选择开始日期，则禁用所有结束日期

Question

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

1. 结束日期不得早于开始日期 - 完成
2. 现在我的问题是用户在不选择开始日期的情况下不应选择结束日期

我的日期选择器 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);
    }
  });
}); 

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