Качественный 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/
Скачать исходники примеров
Как раз использую 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']);
});
Все работает.
а можно ли закодировать текст на js в браузере?
просто у меня есть текст, а через json этот текст проблематично передавать, потмоучто парсер «рубает» сам json, блин…
Подкажите, пожалуйста, как сделать чтобы скрипт возвращал дату первого дня недели, понедельника, не зависимо от того какой день недели я выбрал, вторник, или пятницу например,
Например. я выбираю сегодня 12.05.2010 (или 13.05.2010) а скрипт возвращает не сегодняшнее число а 10.05.2010 тоесть число, которое было в понедельник.
Ответьте пожалуйста на email, очень нужно
Здравствуйте. Мне необходимо, чтобы календарь был видимым всегда и при клике на дату из базы MySQL выбиралась данные . Подскажите как реализовать ??? А главное как правильно написать