jquery UI datepicker：从今天开始计算 minDate x 年

Posted 2023-05-08

【中文标题】jquery UI datepicker：从今天开始计算 minDate x 年

【英文标题】：jquery UI datepicker: calculate minDate x years from today

【发布时间】：2019-08-11 11:27:44

【问题描述】：

下午好

我正在尝试为 jQuery UI 日期选择器设置 minDate，它应该对 12 到 17 岁的所有用户都有效。仅使用 maxDate 就可以正常工作。而且我知道我必须以某种方式计算 minDate 。我搜索了所有其他 *** 线程，但找不到类似的东西。我发现的其他解决方案设定了一个固定日期，但与今天相比，我需要 12-17 年。

到目前为止我所尝试的：

minDate: new Date((currentYear - 12), currentMonth, currentDay))

和

minDate: "-12y"

我目前的样本：

$(".datepicker").datepicker(
    numberOfMonths: 1,
    firstDay: 1,
    defaultDate: 0,
    changeMonth: true,
    changeYear: true,
    yearRange: '1910:c',
    dateFormat: 'dd.mm.yy',
    beforeShow: function () 
        var currentYear = (new Date).getFullYear();
        var currentMonth = (new Date).getMonth() + 1;
        var currentDay = (new Date).getDate();
        
        $(this).datepicker( 
            minDate: new Date((currentYear - 12), currentMonth, currentDay),
            maxDate: "-17y -11m -30d"
        );
    
  );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>

<input type="text" class="datepicker" id="myDate">

【问题讨论】：

setting min date in jquery datepicker的可能重复

没有重复，因为该线程设置了修复日期，而不是我需要做的计算日期

【参考方案1】：

minDate: "-12y" 工作得很好，但是如果您只想允许 12 到 17 岁之间的年龄，则需要同时使用 minDate 和 maxDate 来设置允许的范围。

因此，您对onBeforeShow() 以及numberOfMonths、defaultDate 和yearRange 的使用是多余的。试试这个：

$(".datepicker").datepicker(
  firstDay: 1,
  changeMonth: true,
  changeYear: true,
  dateFormat: 'dd.mm.yy',
  minDate: '-17y', // min 17 years ago
  maxDate: '-12y', // max 12 years ago
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />

<input type="text" class="datepicker" id="myDate">

【讨论】：

这太疯狂了，因为当我第一次尝试时它对我不起作用......？？？好的，我现在将逐行仔细查看。谢谢！

我用的是beforeShow，因为我必须先检查另一个参数（在这里做一个切换），然后我可以根据给定的参数设置最小和最大日期

在这种情况下，在实例化控件之前检查它更有意义。

好的，它也可以反过来工作:-) 首先进行切换，然后使用填充的参数设置最小和最大日期。好的。感谢您让我走上正确（更轻松）的轨道！