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

I am using the jquery ui datepicker with select date range. I know that by default it already set if the from picks a date then the to date can not pick any date before the from date picked. I also checked the minDate and maxDate documents but I still couldn't try figuring it out.

我正在使用带有选择日期范围的jquery ui datepicker。我知道默认情况下已经设置了如果from选择日期,那么到日期不能选择从选择的日期之前的任何日期。我还检查了minDate和maxDate文档,但我仍然无法尝试搞清楚。

I want to keep the default setting it has which is after date from is chosen date to cannot be before the from date vise versa but also want to add another restriction which is both datepickers have a maxDate of 0 which is today. None of them can be picked pass today.

我想保持它所具有的默认设置,即从选择日期到日期之后不能在起始日期之前反之亦然但是也想要添加另一个限制,即datepickers的maxDate为0,这就是今天。今天没有一个可以通过。

This is pretty much just the standard.

这几乎就是标准。

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

I tried adding these two but none of them works though

我尝试添加这两个,但它们都没有用

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

but none of them work though.

但它们都不起作用。

Thank you in advance.

先感谢您。

2 个解决方案

#1

Alright so pretty much you need to check if the selectedDate is empty when date-to-field is updated and make the maxDate to "0". Once you do it should act as you wanted, it'll set the max to today's date or if the date of the from if it's not todays date. Here's a codepen that works for me - CodePen.

好的,你需要在更新日期到字段时检查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"
});

EDIT

Updated the CodePen a bit more so that it checks if the selected date is greater than todays date.

更新了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"
});

#2

You can refer to this link : http://api.jqueryui.com/datepicker/#option-maxDate

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

This is to Initialize the datepicker with the maxDate option specified, not to set it up afterwards:

这是使用指定的maxDate选项初始化datepicker,而不是在之后设置它:

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

To modify/get the option, use this:

要修改/获取选项,请使用以下命令:

Get or set the maxDate option, after initialization:

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

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

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

"+0" is for now()

“+0”现在是()

Same for mindate!

同样值得注意!

#1

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