Ссылки

Поиск

Привет, Гость

Войти
Идентификация
Я забыл свой пароль
Регистрация

Обновления на форуме

Блок новостей в виде блога 2 >>
Игры для сайта 34 >>
Сервис создания тестов 94 >>
Дед 1 >>
На сайте регистрация пользователей спамом 3 >>

Неофициальные данные из анонимных источников высосаны из двадцать первого пальца.

RSS фиды

RSS Файлы
RSS Новости
RSS Форум

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







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



Пример №1.
Код: 
php Дата заезда: <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.
Код: 
php Дата заезда: <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 (ради чего всё и затевалось).
Код: 
php Дата заезда: <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 == 0) day = parseInt(dateText.substr(1,1));

        var month = parseInt(dateText.substr(3,2));

        if(month == 0) month = parseInt(dateText.substr(4,1));

        var year = parseInt(dateText.substr(6,4));

        

        var d = new Date(year,month-1,day+1);

        

        var newDay = d.getDate();

        var newMonth = (d.getMonth()+1);

        var newYear = d.getFullYear();

        if(newDay < 10) newDay = "0" + newDay;

        if(newMonth < 10) newMonth = "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>
Дата заезда:
Дата уезда:
Дата 2012-11-27 16:32:17

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

Вы не залогинены!

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