РазделыСтатьиРазработка сайтов → Связанные даты на jQuery UI




Базовый функционал datepicker представляет собой очень удобный календарь.

Пример №1.
Код:

Дата заезда: <input id="date_in1" name="date_in1" type="text"><br>

Дата уезда: <input id="date_out1" name="date_out1" type="text"><br>
<
script type="text/javascript">
$(
"#date_in1").datepicker();
$(
"#date_out1").datepicker();
</script>
Дата заезда:
Дата уезда:


Но его функционал "связки" двух полей между собой оставляет желать лучшего. Связанное с основным поле тупо копирует данные первого поля.
Разработчик добавил только возможность поменять формат вывода. Но не дату. Вот как это работает.

Пример №2.
Код:

Дата заезда: <input id="date_in2" name="date_in2" type="text"><br>

Дата уезда: <input id="date_out2" name="date_out2" type="text"><br>
<
script type="text/javascript">
$(
"#date_in2").datepicker();
$(
"#date_out2").datepicker();
</script>
Дата заезда:
Дата уезда:


Как видно, и во втором примере достаточно просто все.
Но нам нужно, чтобы второе поле было "завтра" или "через 3 дня" после введенного в первое поле. Да ещё желательно отключить возможность выбора прошедших дат.
Вот готовое решение, объяснять там особо нечего, нужно применять да и все;)

Пример №3 (ради чего всё и затевалось).
Код:

Дата заезда: <input id="date_in" name="date_in" type="text"><br>

Дата уезда: <input id="date_out" name="date_out" type="text"><br>
<
script type="text/javascript">
if (
date_out=='+1')    
$(
"#date_out").datepicker({
    
minDate:date_out
    
}) ;
$(
"#date_in").datepicker({
    
minDate:'0',
        
onSelect: function(dateText) {
        var 
day parseInt(dateText.substr(0,2));
        if(
day == 0day parseInt(dateText.substr(1,1));
        var 
month parseInt(dateText.substr(3,2));
        if(
month == 0month parseInt(dateText.substr(4,1));
        var 
year parseInt(dateText.substr(6,4));
        
        var 
= new Date(year,month-1,day+1);
        
        var 
newDay d.getDate();
        var 
newMonth = (d.getMonth()+1);
        var 
newYear d.getFullYear();
        if(
newDay 10newDay "0" newDay;
        if(
newMonth 10newMonth "0" newMonth;
        
        var 
newData newDay "-" newMonth "-" newYear;
        $(
"#checkin").attr("value",dateText);
        $(
"#date_out").attr("value",newData);
        $(
"#date_out").datepicker("option""minDate",newData);
        
date_out newData;
    }
    
    }) ;
</script>
Дата заезда:
Дата уезда:
27.11.2012 15:32 Автор/источник: Den1xxx

Комментировать

Вы не залогинены! Регистрация

Устал читать? Напиши! Или позвони +375 29 5344286. На связи по будним дням с 800 до 1700.