Календарь для движка сайта - вещь не только нужная, но и полезная. Помимо того, что они позволяют смотреть календарь (неужели?! - прим.ред.), они носят массу полезных функций (не может быть! - прим.ред.), начиная от обычной "пробы пипеткой" до составления календаря событий (да что вы говорите! - прим.ред.).
В данной статье будет рассмотрено большинство плагинов календарей и datepicker'ов для jQuery. Однако в конце статьи вас будет ждать один плагин, не на jQuery, который я для себя отметил уже давно, и который проходить мимо мне не позволяет совесть. Итак…
jQuery Date Pickers
jQuery UI Datepicker. Пожалуй для jQuery это передовой календарь, а точнее datepicker. Работает везде и безоговорочно. Правда замечено в Опере 9.26 (в 10 нормально всё) и в ишаках ниже 7 включительно некоторая тормознутость. Однако это не меняет того, что работает он более чем исправно. Есть поддержка скинов. И, что немаловажно, поддержка кучи различных языков. Чтобы вы не искали, даю сразулинк.
jQuery Datepicker. Основан на jQuery UI Datepicker, но отделён от него в связи с тем, что разработчики jQuery UI Datepicker захотели более простой функционал. То есть данный плагин обладает дополнительными функциями, которых у первого нет. Перечислять их нет смысла, нужно смотреть. Пробегитесь по ссылке с примерами по различным вкладкам и сами поймёте. Его возможности очень и очень радуют.
jQuery date picker plug-in. Очень похож на предыдущего собрата, только функционал может быть чутка поменьше. Хотя не уверен в этом.
Date Picker - jQuery plugin. Хотел бы я назвать этот плагин лучшим, но не могу, так как кроссбраузерность у него хромает. В Опере 9.26 календарь напрочь не откликается на воздействия, в Опере 10 у него проблемы с отображением (правда небольшие), в IE6 отображается криво насколько это возможно. Если вас всё это не смущает, то использовать крайне рекомендуется! Возможностей у него уйма, можете посмотреть по ссылке примера.
dynDateTime. Простой datepicker, особенностью которого является работа ещё и со временем.
jMonthCalendar. Уникальный календарь, который позволяет работать с событиями. Календарю лишь надо подпихнуть массив событий и всё. В Опере 9.26 слегка нестабилен, а так всё нормально. Советую ознакомиться.
FullCalendar. Календарь похож на предыдущий, но только гораздо лучше. Он по праву может называться органайзером - можно расписать все дела и посмотреть их в календаре на месяц, на неделю или день, всё как в КПК. Стабилен, кроссбраузерен, пока аналогов не встречено, посему зе бест.
jQuery Week Calendar. Календарь дел на неделю. В Опере 9.26 не работает. Поскольку предыдущий плагин имеет и функцию этого плагина, то пожалуй предыдущий будет лучшим выбором.
jCal jQuery plugin. Очень симпатичный плагин с возможностью выбора нескольких дат. Кроссбраузерен вроде как. Не проходите мимо, он стоит вашего внимания.
iCal-like Calendar. Календарь в стиле айфона с возможностью записи событий.
Simple jQuery date-picker. Календарь без претензий на гениальность. Всё просто.
jQuery Date Input. Ещё один простой datepicker.
jQuery Calendar Widget Plugin. Простой календарь на jQuery, не datepicker. В принципе, аналогичный вид можно сделать и на php, однако если с ним нету дружбы, то вариант на jQuery - это выход.
БОНУС!
Календарей, конечно, рассмотрено достаточно, чтобы выбрать подходящий, однако это не всё. Несмотря на мою любовь к jQuery, всё таки лучший календарь datepicker я нашёл не у него.
Vista-like Ajax Calendar. Календарь не замечан за наличием багов, очнеь красив и удобен. Он очень похож на Date Picker - jQuery plugin (под номером 4 выше), но не имеет его недостатков. Он работает совместно с MooTools.
На сегодня, пожалуй, всё. Полагаю вы точно найдёте то, что вам нужно. До новых встреч!
Нет. Всё равно сияние вокруг букв делает из размытыми.
Смотри (http://img534.yfrog.com/img534/3369/jqueryjquerydatepicker.png) на мини-врезках календарей текст читается хорошо, даже маленький. А на кнопках “Инфо”, “Пример”, “Скачать” – белая косая штриховка + белые буквы + белое сияние дают плохой результат. Чёрная кошка в тёмной комнате
в принципе я изначально и хотел чтобы у них такой эффект был, но, раз это плохо читается, надо править.
завтра буду дома, исправлю, поиграюсь с тёмным сиянием =)
Мне тоже больше всего понравился Vista-like Ajax Calendar. Но во всех примерах там только 1 календарь. А если нужно, чтобы на странице было 2 календаря ? С даты и ПО дату ? Хотелось бы и такой пример.
хы, ну так оно и хорошо! вообще там несколько календарей не проблема – достаточно посмотреть страницу примеров и посмотреть как их несоклько они на страницу засунули)
вот этот календарь лучше всех. если брать вариант со временем. А если используется jquery-ui, то безусловно, вариант самый идеальный – меньше всего нужно будет подключать. Хотя есть варианты, когда отдельные календари хороши. Но это если кроме календаря больше ни чего не используется на jQuery
да всё как обычно – на вкус и на цвет. а что касается вариантов со временем, согласен – вариант действительно хорош.
заметил? что Вы любитель jQueryUI =)
Оно, конечно, удобно, особенно когда много возможностей надо вешать, но когда 1-2 скрипта, наверное, проще и менее нагруженно будет найти отдельные решения.
Доброе утро!
Ну, нужна стандартная библиотека mootools и плагин Vista-like Ajax Calendar. а раз другие фреймворки не используются, то вы смело можете добавлять этот календарь
Доброе утро!
А не подскажете как подружить календарь с кирилицей?
Пробовал пропустить массив с русскими месяцами из файла base.php через функцию iconv(‘utf-8′,’windows-1251′,$array)
Но ничего не получилось… (
кодировку нужно проверять в:
1) метатеге в шапке сайта
2) в базе данных
3) кодировка непосредственно текстовых файлов, в которых написан весь код (проверить можно в любом “нормальном” текстовом редакторе)
Я тут пытаюсь календарь с этим xiper.net/collect/html-and-css-tricks/verstka-form/nice-select-jquery.html сверстать на одной страничке. У меня при вставке последнего исчезает календарь, а стилизованный селект так и не работает? не могу понять, в чем дело:(
Блог больше не ведётся. Большинство материалов имеют давнюю дату публикации, учите, что не всё является на сегодняшний день актуальным. Спасибо за внимание!
Меня зовут Александр, я веб-программист со стажем, автор ShuBlog'а, владелец/директор по развитию PetrogradWeb. Мы занимаемся разработкой и развитием сайтов, сервисом и приложений, также продвижением бизнеса в сети. alex [собака] petrogradweb [точка] ru
03/03/2010 at 15:20 Постоянная ссылка Цитировать
Оооо) Очень полезная статья)) пригодится. Но из всех Календарей я отдаю предпочтение “Vista-like Ajax Calendar”.
03/03/2010 at 16:26 Постоянная ссылка Цитировать
Спасибо, рад слышать =)
Аналогично. Уж очень он удачно сделан
06/03/2010 at 13:42 Постоянная ссылка Цитировать
Спасибо большое за такую статью!
06/03/2010 at 13:44 Постоянная ссылка Цитировать
Большое пожалуйста! =)
13/04/2010 at 12:59 Постоянная ссылка Цитировать
Спасибо за сборку.
Замечание: на кнопках “Инфо”, “Пример”, Скачать” слишком светящийсяили размытый текст. Сделайте более контрастным, пожалуйста.
13/04/2010 at 20:16 Постоянная ссылка Цитировать
Спасибо за отзыв!
Всё для читателей: сделал заметно чётче. Норм?
16/04/2010 at 16:32 Постоянная ссылка Цитировать
Нет. Всё равно сияние вокруг букв делает из размытыми.( http://img534.yfrog.com/img534/3369/jqueryjquerydatepicker.png ) на мини-врезках календарей текст читается хорошо, даже маленький. А на кнопках “Инфо”, “Пример”, “Скачать” – белая косая штриховка + белые буквы + белое сияние дают плохой результат. Чёрная кошка в тёмной комнате
Смотри
16/04/2010 at 16:48 Постоянная ссылка Цитировать
в принципе я изначально и хотел чтобы у них такой эффект был, но, раз это плохо читается, надо править.
завтра буду дома, исправлю, поиграюсь с тёмным сиянием =)
17/04/2010 at 13:49 Постоянная ссылка Цитировать
Предлагаю изменённый вариант кнопок. Как оно?
01/07/2010 at 16:59 Постоянная ссылка Цитировать
Все равно размыто, но я если честно даже не обратила на это внимания.
Спасибо за подборку календариков ^^ Порадовало.
01/07/2010 at 17:15 Постоянная ссылка Цитировать
старался как лучше, в итоге получилось то что есть =)
пожалуйста=)
15/11/2010 at 13:29 Постоянная ссылка Цитировать
Мне тоже больше всего понравился Vista-like Ajax Calendar. Но во всех примерах там только 1 календарь. А если нужно, чтобы на странице было 2 календаря ? С даты и ПО дату ? Хотелось бы и такой пример.
15/11/2010 at 13:40 Постоянная ссылка Цитировать
Всё … поковырял, сделал сам ))
15/11/2010 at 16:26 Постоянная ссылка Цитировать
хы, ну так оно и хорошо! вообще там несколько календарей не проблема – достаточно посмотреть страницу примеров и посмотреть как их несоклько они на страницу засунули)
15/12/2010 at 19:08 Постоянная ссылка Цитировать
15/12/2010 at 19:29 Постоянная ссылка Цитировать
спасибо за ссылку, хороший датпикер!
05/05/2011 at 6:50 Постоянная ссылка Цитировать
Жаль, что у этих календарей нет возможности выбора времени. иногда время тоже очень нужно
05/05/2011 at 7:25 Постоянная ссылка Цитировать
Но ведь не только на этих календарях свет сошёлся. К примеру, есть соответствующий плагин –link
08/05/2011 at 16:44 Постоянная ссылка Цитировать
09/05/2011 at 6:25 Постоянная ссылка Цитировать
да всё как обычно – на вкус и на цвет. а что касается вариантов со временем, согласен – вариант действительно хорош.
заметил? что Вы любитель jQueryUI =)
10/05/2011 at 3:26 Постоянная ссылка Цитировать
Ну так вышло, что я изучаю jQuery именно с UI. Ну и шаблонов там много красивых.
10/05/2011 at 14:28 Постоянная ссылка Цитировать
Оно, конечно, удобно, особенно когда много возможностей надо вешать, но когда 1-2 скрипта, наверное, проще и менее нагруженно будет найти отдельные решения.
17/06/2011 at 12:18 Постоянная ссылка Цитировать
А как подключить календарь ? я еще совсем зеленый в jquery
код получилhttp://jquery-ui.googlecode.com/svn/trunk/ui/jquery.ui.datepicker.js
поле сделал Date:
а как теперь ето связать что б запускалось?
17/07/2011 at 18:06 Постоянная ссылка Цитировать
Здравствуйте!”
А что из MooTools. нужно для работы
Vista-like Ajax Calendar.?
У меня не используются в приложении фреймверки.
Только чистый JS и PHP
Заранее благодарен за совет
18/07/2011 at 9:32 Постоянная ссылка Цитировать
Доброе утро!
Ну, нужна стандартная библиотека mootools и плагин Vista-like Ajax Calendar. а раз другие фреймворки не используются, то вы смело можете добавлять этот календарь
22/07/2011 at 2:45 Постоянная ссылка Цитировать
Доброе утро!
(
А не подскажете как подружить календарь с кирилицей?
Пробовал пропустить массив с русскими месяцами из файла base.php через функцию iconv(‘utf-8′,’windows-1251′,$array)
Но ничего не получилось…
22/07/2011 at 7:13 Постоянная ссылка Цитировать
Доброе!
кодировку нужно проверять в:
1) метатеге в шапке сайта
2) в базе данных
3) кодировка непосредственно текстовых файлов, в которых написан весь код (проверить можно в любом “нормальном” текстовом редакторе)
22/07/2011 at 12:28 Постоянная ссылка Цитировать
В предыдущем комментарии я ошибся… я имел ввиду файл vars.php
22/07/2011 at 12:47 Постоянная ссылка Цитировать
Ну, актуальность сообщения, где написано где нужно проверить кодировку, осталась=)
25/07/2011 at 20:57 Постоянная ссылка Цитировать
Я тут пытаюсь календарь с этим xiper.net/collect/html-and-css-tricks/verstka-form/nice-select-jquery.html сверстать на одной страничке. У меня при вставке последнего исчезает календарь, а стилизованный селект так и не работает? не могу понять, в чем дело:(
25/07/2011 at 23:51 Постоянная ссылка Цитировать
смотря какой календарь пытаетесь делать и смотря как =)
26/07/2011 at 20:48 Постоянная ссылка Цитировать
Спасибо, сделала, библиотеки не надо было мешать, прописать 1у и все)
03/08/2011 at 0:03 Постоянная ссылка Цитировать
Рад, что всё разрешилось =)
04/10/2011 at 8:24 Постоянная ссылка Цитировать
Подскажите, пожалуйста, в чём проблема?
Хочу, чтобы работал календарик Vista-like Ajax Calendar.
Для этого подключил “vlaCal-v2.1.css” и прописал пути к файлам “mootools-1.2-core-compressed.js” и “vlaCal-v2.1-compressed.js”
Вот только проблема! При нажатии на инпут, всплывает не весь календарик с днями и месяцами, а только его рамочка и белый квадрат внутри.
Что не доподключил?
Подскажите, пожалуйста!
05/10/2011 at 13:43 Постоянная ссылка Цитировать
Вероятно у вас картинки не подгружены для оформления. Либо что-то не так подключено
20/11/2013 at 10:14 Постоянная ссылка Цитировать
В Вашей отличной коллекции не хватает одного замечательного плагинаDateTimePicker
20/11/2013 at 10:19 Постоянная ссылка Цитировать
Спасибо!
Не удивительно, что не хватает, старенькая статья уже. Эх)
20/11/2013 at 12:08 Постоянная ссылка Цитировать
Ну на то и комментарии чтобы пополнять)
20/11/2013 at 12:12 Постоянная ссылка Цитировать
Ваша правда =)
19/01/2014 at 4:41 Постоянная ссылка Цитировать
Да, Vista-like Ajax Calendar +100500
10/08/2017 at 17:29 Постоянная ссылка Цитировать
Говно ужасное а не календари
10/08/2017 at 19:26 Постоянная ссылка Цитировать
Василий, статье уже 7 лет, что вы тут ожидали увидеть?=))