Question

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

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

Textbox输出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范围是硬编码的。解决这个问题的最佳方法是什么？

Answer 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);
    });
});

基于下拉列表的JQuery限制日期范围

1 个答案: