1

我正在使用 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(document).ready(function() {
         $("#ctl00_contentactual_txtDate").datepicker({ minDate: new Date(2010, 8 - 1, 1), maxDate: new Date(2010, 8 - 1, 31) });
     });

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

4

1 回答 1

2

这就是我要做的。

更改下拉值以包含能够被 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);
    });
});​
于 2010-08-11T19:41:39.257 回答