jQuery ui datepicker-如何在一个datepicker中设置两个最小/最大日期限制? [英] jquery ui datepicker - how to set two min/max date restrictions in one datepicker?

问题描述

我正在将jquery ui datepicker用于选择日期范围.我知道默认情况下它已经设置，如果from选择日期，那么to date不能选择起始日期之前的任何日期.我还检查了 minDate 和 maxDate 文档，但仍然无法解决.

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.

我想保留其默认设置，该默认设置是从选择日期到选择日期，不能再到从日期开始，反之亦然，但是我想添加另一个限制，因为两个日期选择器都有一个 maxDate 今天的0.今天没有人可以通过.

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.

这几乎就是标准.

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

但是它们都不起作用.

谢谢.

推荐答案

好的，您几乎需要在更新日期至字段时检查selectedDate是否为空，并将maxDate设置为"0".一旦完成，它就会按照您想要的方式运行，它将最大值设置为今天的日期，或者将起始日期设置为不是今天的日期.这是一个对我有用的codepen- CodePen .

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.

    $("#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进行了更多更新，以便它检查所选日期是否大于今天的日期.

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

$("#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 datepicker-如何在一个datepicker中设置两个最小/最大日期限制?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！