Диапазон дат ограничения JQuery на основе раскрывающегося списка - PullRequest
Новая
       14

Диапазон дат ограничения JQuery на основе раскрывающегося списка

0 голосов
/ 11 августа 2010

Я использую JQuery DatePicker, чтобы пользователь выбирал дату и отображал ее в текстовом поле.Достаточно просто.Однако есть ограничение, над которым я работаю, это то, что диапазон дат ограничен на основе месяца, который в данный момент выбран в раскрывающемся меню пользователя, датами начала и окончания месяца.

Так, например, если кто-то выберет «Авг/ 2010 "в раскрывающемся списке, тогда Datepicker для текстового поля должен быть между 1 августа и 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 жестко запрограммирован.Какой лучший способ решить эту проблему?

1 Ответ

1 голос
/ 11 августа 2010

Вот что я бы сделал.

Измените раскрывающиеся значения, чтобы они содержали минимальный / максимальный диапазон дат, который может быть проанализирован 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);
    });
});​
...