Datepicker динамические мин / макс даты - PullRequest
Новая
       38

Datepicker динамические мин / макс даты

2 голосов
/ 04 марта 2011

Я использую плагин jQuery datepicker на создаваемом мной сайте.Мне нужно, чтобы пользователи могли выбирать две даты в указанном диапазоне дат.Это достаточно просто сделать.

Проблема в том, что допустимый диапазон дат изменяется в зависимости от другого поля выбора (с именами зданий в).Поэтому мне нужно найти здание в базе данных mysql, вернуть минимальную и максимальную допустимую дату и использовать средство выбора даты, чтобы пользователи могли выбирать диапазон дат в допустимом диапазоне.

На моем главномстраница, в настоящее время я использую: 

$('#dateStartMainChart').load(url);

для загрузки php-файла, который выводит: 

<script> 
$(function() {
    $( "#dateEndMainChartSelect" ).datepicker({ 
        dateFormat: 'yy-mm-dd',
        defaultDate: -1,
        minDate: new Date(2011,03,03),
        maxDate: +0,
            firstDay: 1,
        changeMonth: true,
        changeYear: true
    });
}); 
</script>
<input type="text" class="text" value=2011-03-04 id="dateEndMainChartSelect" align="center"/>

, где minDate и maxDate были правильно заполнены из базы данных mysql.Однако в результате я просто получаю текстовое поле с датой на моей главной странице вместо элемента datepicker.

Есть мысли?

Ответы [ 2 ]

8 голосов
/ 04 марта 2011

Если вы хотите сделать это, вы можете использовать атрибут beforePhow в DatePicker, чтобы помочь вам. Вот пример псевдокода. 

// Your start and end datepickers.
$('#dateStartMainChart, #dateEndMainChartSelect').datetimepicker({
    beforeShow: customRange
});

// I can't take credit for this...website to tutorial is below.
// From: http://test.thecodecentral.com/cms/jqueryui/datepicker/
function customRange(input) {
    return { minDate: (input.id == 'dateEndMainChartSelect' ? $('#dateStartMainChart').datepicker('getDate') : null),
        maxDate: (input.id == 'dateStartMainChart' ? $('#dateEndMainChartSelect').datepicker('getDate') : null)
    };
}

Вам даже не нужно смотреть на базу данных напрямую (хотя вы можете - настроить поля соответствующим образом в функции customRange). В любом случае, это должно делать то, что вам нужно.

5 голосов
/ 08 марта 2011

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

$.getScript('url.php', function() {updateDate(); });

В моем случае я использую это при изменении поля выбора.

Файл php, который вызывается, запрашивает базу данных mysqlвыводит следующее (используя echo): 

function updateDate() {
        $( "#dateStartMainChartSelect" ).datepicker('change',{ 
            minDate: new Date(2011,01,01),
            maxDate: new Date(2011,02,01)
        });
    }

Здесь вы можете добавить любой из параметров выбора даты, который вы хотите изменить.Благодаря JasCav я нашел правильные места для решения.

...