jQuery ui datepicker-如何在一个datepicker中设置两个最小/最大日期限制？

Question

我正在使用jquery ui datepicker和选择日期范围。 我知道默认情况下已经设置好了，如果from选择日期，那么to date不能选择起始日期之前的任何日期。 我还检查了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 - 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"
});

Answer 2

您可以参考以下链接： http : //api.jqueryui.com/datepicker/#option-maxDate

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

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

要修改/获取选项，请使用以下命令：

初始化后获取或设置maxDate选项：

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

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

目前为"+0" now()

同样要注意！