Ссылки

Поиск

 
Новости, Статьи
Форум
Файлы

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

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

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

Гадания на таро 0 >>
Блок новостей в виде блога 1 >>
Игры для сайта 34 >>
Сервис создания тестов 94 >>
Дед 1 >>

Последние статьи

Сайт для фирмы-изготовителя натяжных потолков 0
Антиспам «Я не робот» 0
За что воюет Украина и когда всё это кончится 12
Удаление родителя текущего элемента на jQuery 0
Простой аккордеон на jQuery №3 0

Чтобы не заходить на нужный сайт каждый день, достаточно подписаться на RSS-канал.

RSS фиды

RSS Статьи
RSS Клиентам
RSS Новости
RSS Файлы
RSS Форум

Разделы → Статьи → Разработка сайтов → Связанные даты на 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 == 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>
Дата заезда:
Дата уезда:
27.11.2012 15:32 Автор/источник: Den1xxx

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

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

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