JQuery UI datepicker — Как реализовать возможность выбора двух дат, от и до в 1 встроенном календаре?

Question

[Rubaka]

Имеется встроенный календарь с событием по нажатию на дату, она прикрепляется к текстовому полю:

<script type="text/javascript"><br>
$().ready(function() {<br>
<br>
$("#datepicker").datepicker({<br>
	onSelect: function(dateText, inst) { <br>
		$("#datepicker_value").val(dateText);<br>
	}<br>
});<br>
<br>
});<br>
</script><br>

<p<input type="text" value="08.07.2012" id="datepicker_value"/></p>

Задача: Реализовать возможность выбора двух дат, от и до в одном встроенном календаре, с подсветкой 1 поля и 2 поля.

Т.е. чтобы после выбора 1 даты «от», давалось возможность выбрать дату «до». И оба значения заносились в разные текстовые поля.

Реализовать необходимо именно через datepicker.



Второстепенные задачи: При выборе 1 даты, поле 2 даты автоматически принимает значение +1w



Пример реализации тут: avia.onlinetur.ru/

Поиск перелетов, поля туда и обратно.

Answer 1

[Назар Мокринский]

Взгляните на этот пример:
multidatespickr.sourceforge.net

Answer 2

[winbackgo]

Ну это надо расширять datapicker, из коробки он такого не умеет. Вот тут описан функционал. Там есть ссылка, но сейчас она выдает ошибку.

Comments

[winbackgo]

А, вот нашел демку www.filamentgroup.com/examples/daterangepicker_v2/

[Rubaka]

За 1 ссылку спасибо, а можно его в связке с datepicker использовать разве?

В Date Range реализовано на 2 календаря, либо 2 поля, не нашел примера где бы это было реализовано на 1 календаря, без выпадающего поля… суть именно в том, чтобы из 1 календаря вытащить 2 поля и разнести их в отдельные инпуты.

[winbackgo]

Ну да, там два файла www.filamentgroup.com/examples/daterangepicker_v2/js/daterangepicker.jQuery.js и www.filamentgroup.com/examples/daterangepicker_v2/css/ui.daterangepicker.css включаете совместно с JqueryUi datepicker и используете. Смотрите искходник примера.
В первом посте тоже хорошее решение, раньше мне не попадалось.

[winbackgo]

Вот офф описание www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/

Answer 3

[Петруша Укропов]

Сайт из примера не открылся у меня. Так хотели jsfiddle.net/BJEYe/?

Comments

[Rubaka]

Вот скриншот s2.ipicture.ru/Gallery/Viewfull/11675265.html
2 поля, 2 календаря, не то…

Answer 4

[Макс]

Хм, а что мешает Вам воспользоваться событиями, предоставленными самим календарем от jquery? Напишите корректный обработчик для onSelect для вставки даты во второе поле