jquery ui 日期选择器 - 如何在一个日期选择器中设置两个 min/max 日期限制？

Question

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

我想保留它的默认设置，即在选择日期之后的日期不能在开始日期之前，反之亦然，但我还想添加另一个限制，即两个日期选择器都有一个 maxDate 0 也就是今天。 None 今天可以通过。

这几乎就是标准。

  $( "#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 );
    }
  });

我尝试添加这两个，但其中 none 有效

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

但其中 none 仍然有效。

提前致谢。

Answer 1

你可以参考这个link：http://api.jqueryui.com/datepicker/#option-maxDate

这是为了初始化指定了 maxDate 选项的日期选择器，而不是之后再设置它：

$( ".selector" ).datepicker({
  maxDate: "+1m +1w"
});

要modify/get选项，使用这个：

Get or set the maxDate option, after initialization:

// Getter
var maxDate = $( ".selector" ).datepicker( "option", "maxDate" );

// Setter
$( ".selector" ).datepicker( "option", "maxDate", "+1m +1w" );

"+0" 用于 now()

同样适用于 mindate！

Answer 2

好吧，您几乎需要在更新日期到字段时检查 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"
});

jquery ui 日期选择器 - 如何在一个日期选择器中设置两个 min/max 日期限制？

jquery ui datepicker - how to set two min/max date restrictions in one datepicker?

javascript

jquery

jquery-ui

date

datepicker