1

JQuery DatePicker を使用して、ユーザーに日付を選択させ、それをテキスト ボックスに表示させています。簡単です。ただし、私が取り組んでいる制限は、ユーザーのドロップダウン メニューで現在選択されている月に基づいて、月の開始日と終了日に日付範囲が制限されることです。

たとえば、誰かがドロップダウンで「2010 年 8 月」を選択した場合、テキストボックスの 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 の範囲はハードコーディングされています。これを解決する最善の方法は何ですか?

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 に答える