javascript - jquery ui datepicker - 如何在一个日期选择器中设置两个最小/最大日期限制？

Question

我正在使用带有选择日期范围的 jquery ui 日期选择器。我知道默认情况下它已经设置，如果起始日期选择一个日期，那么截止日期不能选择起始日期之前的任何日期。我还检查了 minDate 和 maxDate 文档，但我仍然无法尝试弄清楚。

我想保留它的默认设置，即选择日期之后的日期不能早于开始日期，反之亦然，但还想添加另一个限制，即两个日期选择器都有一个 maxDate 0 就是今天。今天他们都无法被选中。

这几乎只是标准。

  $( "#date-from-field" ).datepicker({
    onClose: function( selectedDate ) {
      $( "#date-to-field" ).datepicker( "option", "minDate", selectedDate );
    }
  });
  $( "#date-to-field" ).datepicker({
    onClose: function( selectedDate ) {
      $( "#date-from-field" ).datepicker( "option", "maxDate", selectedDate );
    }
  });

我尝试添加这两个，但它们都不起作用

$( "#date-from-field" ).datepicker({maxDate: "0"});
$( "#date-from-field" ).datepicker({maxDate: "+0m +0w"});

但是它们都不起作用。

提前谢谢您。

Answer 1

好吧，您几乎需要在更新日期到字段时检查 selectedDate 是否为空，并将 maxDate 设置为“0”。一旦你这样做了，它应该按照你想要的方式运行，它会将最大值设置为今天的日期，或者如果不是今天的日期，则设置起始日期。这是一个适合我的代码笔 - CodePen .

    $("#date-from-field").datepicker({
  onClose: function( selectedDate ) {
      $( "#date-to-field" ).datepicker( "option", "minDate", selectedDate );
    },
  maxDate: "0"
});

$("#date-to-field").datepicker({
  onClose: function( selectedDate ) {
    $( "#date-from-field" ).datepicker( "option", "maxDate", selectedDate ? selectedDate: "0" );
    },
  maxDate: "0"
});

编辑

对 CodePen 进行了更多更新，以便检查所选日期是否大于今天的日期。

$("#date-to-field").datepicker({
  onClose: function( selectedDate ) {
    var possibleDate = new Date(selectedDate);
    possibleDate = (possibleDate < new Date())?possibleDate: new Date();
    $( "#date-from-field" ).datepicker( "option", "maxDate", selectedDate ? possibleDate: "0" );
    },
  maxDate: "0"
});