jQuery基于下拉限制日期范围答案

【问题标题】：JQuery Restricting Date Range Based on DropdownjQuery基于下拉限制日期范围
【发布时间】：2010-08-11 18:49:13
【问题描述】：

我正在使用 JQuery DatePicker 让用户选择一个日期并将其显示在文本框中。很容易。然而，我正在处理的一个限制是，日期范围是根据用户下拉菜单中当前选择的月份限制为月份开始日期和结束日期的。

因此，例如，如果有人在下拉列表中选择“Aug/2010”，则文本框的 Datepicker 必须介于 8 月 1 日和 8 月 31 日之间 - 月初和月底。这个

文本框输出的 HTML：

<select id="ctl00_contentlocalnav_Menu_selectmonth">
    <option value="NA">-- Select Month --</option>
    <option value="Jun/2010">Jun/2010</option>
    <option selected="selected" value="May/2010">May/2010</option>
    <option value="Aug/2009">Aug/2009</option>
    <option value="Jul/2009">Jul/2009</option>
</select>

jQuery:

     jQuery(document).ready(function() {
         $("#ctl00_contentactual_txtDate").datepicker({ minDate: new Date(2010, 8 - 1, 1), maxDate: new Date(2010, 8 - 1, 31) });
     });

如您所见，JQuery 范围是硬编码的。解决这个问题的最佳方法是什么？

【问题讨论】：

出于好奇，您为什么不允许使用 datepicker 来选择年份和月份？如果是为了方便（大年份范围），那你为什么需要限制用户？
这是一个很好的问题 - 主要是不方便，因为这是我从数据库中取回数据的方式。
您能否进一步说明为什么用户仅限于某些月份和年份对？如果你需要月份和年份来从数据库中获取数据，你能不能只从选定的日期获取月份和年份，然后从那里查看数据库？
@Nate 不确定我是否理解这个问题。我需要月/年对将数据返回到数据库，这是第 1 步。下一步是用户可能想要修改输出数据中的某些日期，但他仅限于特定的月/年。

标签： javascript jquery jquery-ui datepicker jquery-ui-datepicker

【解决方案1】：

这就是我要做的。

更改下拉值以包含 JavaScript 能够解析的最小/最大日期范围。例如：

<select id="ctl00_contentlocalnav_Menu_selectmonth">
    <option value="NA">-- Select Month --</option>
    <option value="06/01/2010-06/30/2010">Jun/2010</option>
    <option selected="selected" value="05/01/2010-05/31/2010">May/2010</option>
    <option value="08/01/2009-08/31/2009">Aug/2009</option>
    <option value="07/01/2009-07/31/2009">Jul/2009</option>
</select>

然后您可以绑定到下拉列表的change 事件，并更改日期选择器范围。

$(function() {
    $('#ctl00_contentlocalnav_Menu_selectmonth').change(function() {
        var ranges = $(this).val().split('-');
        var minDate = new Date();
        minDate.setTime(Date.parse(ranges[0]));
        var maxDate = new Date();
        maxDate.setTime(Date.parse(ranges[1]));
        $("#ctl00_contentactual_txtDate").datepicker('option', 'minDate', minDate);
        $("#ctl00_contentactual_txtDate").datepicker('option', 'maxDate', maxDate);
    });
});

【讨论】：

这很好，但我无法更改该值，因为它实际上是一个 ASP 下拉控件。
有可能。我过去做过。如果您提供一些示例代码，我可以尝试帮助您。