Качественный datepicker это jQuery UI Datepicker
Чем глубже изучаю фреймворк jQuery, тем больше возможностей он мне открывает. Если раньше чтобы реализовать работоспособный диалог выбора даты на javascript, я искал среди доисторических громоздких монстров, сам русифицировал, сам дописывал нужный мне функционал, сам обеспечивал кроссбраузерность.
Но все это в прошлом. Оказывается jQuery UI (дополнительные библиотеки пользовательского интерфеса) содержат в себе виджет Datepicker, а jQuery UI это кроссбраузерность, локализация, надежность jQuery и возможность темизации (пользовательской стилизации) виджетов.
Приступим к созданию собственного диалога выбора даты
- Скачиваем библиотеку jQuery (http://jquery.com/)
- Переходим на страницу загрузок jQuery UI. Здесь можно скачать комплект для разработчиков (в него включены все виджеты, контролы из jQuery UI), но я советую выбрать “Build your Download” и собрать только тот функционал, который используется на сайте.
Получаем нужный нам функционал в виде архива.
- Полученные файлы складываем в отдельную папку, причем в только что скачанном архиве jQuery UI находим в папке ui файл ui.datepicker-ru.js (это файл локализации, он нужен для отображения дней и месяцев на русском языке). Нам понадобятся только файл локализации и сама библиотека.
- Открываем index.html, и между тегами <head> и </head> вставляем следующий код.
<!-- Подключаем jQuery --> <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <!-- Подключаем jQuery UI (у нас там только datepicker) --> <script type="text/javascript" src="jquery-ui-personalized-1.5.3.packed.js"></script> <!-- Подключаем русификацию datepicker`a --> <script type="text/javascript" src="ui.datepicker-ru.js"></script>
- Теперь, когда почти все готово можно протестировать работает ли все что мы подключили. Вставляем м-ду тегами <body> и </body> код:
<script type="text/javascript"> /*<![CDATA[*/ var $d = jQuery.noConflict(); $d(document).ready(function() { // Указываем дейтпикеру что выводить все нужно на русском $d.datepicker.setDefaults($d.datepicker.regional['ru']); $d('#datepicker_edit').datepicker(); }); /* ]]> */ </script> <input type="text" id="datepicker_edit" />Смотрим ч-з браузер что вышло:
А вышла вот такая размазня. Почему? Потому что я с самого начала не упомянул о том что нужно “стилизировать” календарь. Нет, самому лезть в CSS коды не придется, потому что уже создано достаточно много шкурок для календаря, но если есть желание самому создать уникальный дизайн календаря, посмотрите страницу темизации.
- Стилизация календаря. Я знаю два самых простых способа:
- Скачать готовый стиль, например отсюда: http://marcgrabanski.com/article/jquery-ui-datepicker-themes. Или поискать в гугле по запросу “jQuery UI Datepicker theme”.
- Собрать собственный стиль используя сервис ThemeRoller.
- Мне вот приглянулась готовая тема “smoothness”, я ее скачал и кинул в папку с общими скриптами, после чего подключил css файл в index.html. Вот так теперь выглядит календарь выбора даты:
Уже лучше, правда?
Если вам нужны какие-то дополнительные настройки календаря, то можно почитать о них здесь http://docs.jquery.com/UI/Datepicker.
Пример использования календаря можно посмотреть у меня на сайте:
http://www.samborsky.com/sources/datepicker-jquery-ui/
http://www.samborsky.com/sources/datepicker-jquery-ui-2/
Скачать исходники примеров
Примеры к статье
(5 голосов, средний: 4.2 из 5)
Загрузка ...
Как раз использую jQuery UI в текущем проекте. Иногда достаточно непростую верстку Datepicker смазывает, особенно в районе верхней строчки с выбором месяца и года. Пока не понял до конца когда это происходит, разбираюсь потихоньку. А вещь действительно полезная.
А что за проект?
Многопользовательское расписание. Функционал похож на Google Calendar… Фрилансю понемногу, хотя взялся за его реализацию чисто из спортивного интереса: когда-то хотел сам такое сделать, а тут еще и деньги за это предложили
Подскажите как вывести диапазон дат? чтобы в 2х инпутах - в первом начальная ну и соответственно во втором конечная дата.
Да всё красиво, но насколько это утяжеляет страницу?
jQuery UI - 24 KB
Папка со стилями - 6 КВ
в общем и не сильно утяжеляет, тем более что я в своем проекте подключаю все это только там где используется дата.
Все очень просто: создаем новый input(text), называем его datepicker_edit2, а при инициализации страницы пишем $d(’#datepicker_edit2′).datepicker();
<script type="text/javascript"> /*<![CDATA[*/ var $d = jQuery.noConflict(); $d(document).ready(function() { // Указываем дейтпикеру что выводить все нужно на русском $d.datepicker.setDefaults($d.datepicker.regional['ru']); $d('#datepicker_edit').datepicker(); $d('#datepicker_edit2').datepicker(); }); /* ]]> */ </script> <input type="text" id="datepicker_edit" /> <input type="text" id="datepicker_edit2" />Все это замечательно , человеческое спасибо)) , но необходимо вывести диапазон дат где в первом инпуте будет дата раньше чем в во втором . ну для примера выбрать диапазон между 1 и 20 декабря . в текущем варианте это не достигается (( к сожалению. Нужно видимо как то проверять поля. Может подскажете?
Здесь показано решение. Но у меня не работает. (искать нужный пример по заголовку Another Date Range)
Александр, уточните вопрос.
дейтпикер №1 - какие диапазоны дат нужны?
дейтпикер №2 - какие диапазоны дат нужны?
Настройка диапазонов там довольно легко решается, возможно смогу помочь.
первая дата должна быть меньше второй. причем разумеется можно сначала нажать на второй инпут - выбрать дату. а потом выбрать из первого инпута дату но она должна быть меньше второй. как вариант - во второй дате указал 20 12 2008 . а в первой любую другую НО МЕНЬШЕ (либо равная) чем во второй (20 12 2008).
Александр,
Вот решение
Так же к статье сейчас прикреплю исходники
О!! .. Вы гений)))! не. серьезно. пример то есть в сети, не пойму почему не цеплялся. В IE давай ошибку customRange - определение отстутствует.Как бы то ни было - спасибо еще раз - как только сделаю у себя пост на эту тему - Вас как источник линкану)
Александр, обращайтесь если что.
А кто подскажет что можно придумать по выводу всего datepicker-а в IE ?
У меня он в IE некорректно позиционируется…
Dmitry, пробовали другие темы для datepicker?
Там надо как-то relative сделать у родителя. Не работает только в IE ! В остальных ураузерах усё в порядке!
Причем, если запустить родную страничку с примерами - получаем правильный вывод , в том числе и в IE!
Спасибо за разъяснение. Есть пара вопросов. Возможно ли “малой кровью” в вашем примере “datepicker-jquery-ui-2″ строго ограничить ввод первой даты с “даты сегодня”, без обращения к серверу? Как вывести введенные даты в виде двух переменных в форматах “yyyy-mm-dd” для формирования запроса в sql ? Может вы подскажете оптимальный скрипт? Благодарю за ответ.
?man?, сейчас ничего не могу сказать. башка уже не варит, после праздников посмотрим.
С наступающим 2009 годом всех! Жду. Спасибо
Спасибо за статью - очень помогла! Вы не подскажете, как правильно прикручивать темы, скачанные из галереи ThemeRoller? Я просто подключила ui.all.css, но практически все стили, определенные в css-файлах, нигде не применяются. Пока не могу разобраться, где и каким образом это применение должно происходить
Ann, я когда генерирую темы с помощью ThemeRoller, вырезаю все из ui.all.css, что мне не нужно. Если вы использете оттуда только календарь, его стили и оставье. В файле ui.all.css есть комментарии, по ним и ориентируйтесь что к чему относится.
Но если не уверены, лучше оставьте ui.all.css целиком, в принципе он не такой уж и большой.
ммм, плохо сформулировала. я не о лишних стилях в ui.all.css, а о том, что для такого html:
<!-- Подключаем jQuery --> <!-- Подключаем jQuery UI (у нас там только datepicker) --> <!-- Подключаем русификацию datepicker`a --> /* */тема практически не применяется. то есть, пару мелочей происходит - переносятся селекты на одну строку, например, что доказывает, что css подключен, но вид у календаря при этом почти прежний - ни картинок, ни фонов, ничегошеньки
тема скачана вот отсюда из галереи http://ui.jquery.com/themeroller
Ann, вышлите мне ваш не работающий пример на почту посмотрю
Отправила, спасибо большое!
Ann, на почту скинул рабочее решение
У меня такая же проблема что и у Ann. Если тебя не затруднит вышли мне пожалуйста то, что ты скинул ей. А то я уже 2-а дня мучаюсь и никак не могу подключить эти стили. =(
Maksim, вот:
http://www.samborsky.com/sources/datepicker/sample_datepicker.rar
Может быть подскажете как мне решить такую небольшую проблемку: я показываю или скрываю в зависимости от выбора в одном элементе те или иные поля дат, к каждой хочу привязать datepicker. У меня все вышло. В своей функции я создаю jQuery.noConflict(); потом … .ready(function() {
datepicker.setDefaults(…);
datepicker(…); });
соответственно элементы дейтпикеров создаются только для нужных мне полей, но когда я выбираю другой набор полей - у меня остаются объекты оставшиеся от пред. выбора. Всвящи с этим вопрос: нет ли у detepicker-а метода типа hide или деструктора. А лучше даже было бы прописать для триггера кнопки id=’блаблабла’, но не знаю как сделать это, потому что скрипт запакован.
Все, решил проблему, загнал input поле в ячейку таблицы и задал id для ячейки и скрываю целиком ячейку с картинкой календаря и полем. Спасибо большое за статью - на вашем примере понял как лучше заюзать этот дейтпикер. Пожалуй действительно этот дейтпикер самый лучший. Я перещупал где-то штуки 4-5, но лучше не видел.
Добрый день, подскажите пожалуйста как расширить диапазон выбора года. Так, чтобы можно было выберать, например, от 1900 до 2050?
yearRange: “-100:+10″
диапазон -100 лет от текущей даты, +10 лет от текущей даты
Здравствуйте. Как поставить дату в Datepicker не клиента, а сервера? Дату сервера узнаю через php.
Mukcep Спасибо, Вы мне очень помогли
Автору риспект
Столкнулся с проблемой - работает корректно только в кодировке utf-8.
Решил простым способом: открыл ui.datepicker-ru.js в редакторе, и заменил все кириллические буквы символами, например, Сегодня - Сегодня. Для этого например, в Dreamweaver, создаем документ в кодировке iso-8859-1, в визуальном режиме пишем “Сегодня” , в коде получаем - Сегодня, вставляем в файл ui.datepicker-ru.js вместо надписи “Сегодня” и получаем результат. Теперь в кодировке windows-1251 отображается не абра-кадабра, а нормальный текст.
Еще нужно изменить в файле .htaccess строку AddDefaultCharset UTF-8 на AddDefaultCharset cp-1251.
А чтобы было удобнее с базой работать нужен формат даты 2009-02-13, а не 13-02-2009, для этого в файле ui.datepicker-ru.js меняем строку “dateFormat: ‘dd-mm-yy’, firstDay: 1,” на “dateFormat: ‘yy-mm-dd’, firstDay: 1,”
Это еще раз доказывает что все нужно сейчас создавать в UTF-8 и никогда не будет проблем.
У меня форма заказа аренды автомобиля. Ситуация такая, что к примеру на 02 марта автомобиль уже заказан. Подскажите, пожалуйста, а как можно пометить 02 марта в календаре, например, красным цветом и сделать эту дату неактивной?
Здравствуйте, Евгений!
Спасибо за отличный компонент! Поясните только пожалуйста как мне избавиться от появления Панели информации IE, которая пытается блокировать всплывающие окна jQuery (уровнь безопасности - средний). Когда просматриваю Вашу ссылку http://www.samborsky.com/sources/datepicker-jquery-ui-2/ такой панели не вылезает. В чем секрет?
Ребять а от куда можна вот эту скчать дайте кто нить ссылочку или залейте на bakhtiyor_jon@bk.ru
Заранее благодарен
Кто подскажет как вывести в окне день недели по выбраной дате?
Я скачал. в календаре дата от 1999 до текущего, как сделать чтобы начальная дата была, например, 1950, т.к. я хочу использовать календарь для выбора для рождения
Все разобрался) нашел такой коммент.
Добавил в ui.datepicker-ru.js параметр yearRange: ‘-100:0′
Подскажите с ограничением года
Делаю 2 календаря, значение второго пляшут от выбора первого, но их надо ограничить текущим годом, добавляю yearRange: “0:0″ , но не прокатывает…
Скачал, встроил.
Проблемы с русификацией - даже родной пример выдает крокозябры вместо букв.
Как решил проблему:
1) Прямо в jquery-ui-personalized-1.5.3.packed.js заменил английский текст на русский (месяцы и двухбуквенные дни недели)
2) Файл ui.datepicker-ru.js обрезал до состояния:
/* Russian (UTF-8) initialisation for the jQuery UI date picker plugin. */
/* Written by Andrew Stromnov (stromnov@gmail.com). */
jQuery(function($){
$.datepicker.regional['ru'] = {
dateFormat: ‘yy.mm.dd’, firstDay: 1,
initStatus: ”, isRTL: false};
$.datepicker.setDefaults($.datepicker.regional['ru']);
});
Все работает.