jQuery: datepicker — календарь для выбора дат

    Автор: Gennady

    Эту штуку можно часто встретить, когда сталкиваешься с заполнением форм, там где требуется ввести дату или диапазон дат в нужном формате. Пользователь, он же обязательно ошибется и введет дату не в том формате, потом будет соображать, где ошибка, а потом и вовсе уйдет, не заполнив форму… Вот для того, чтобы сделать выбор даты очень простым и удобным и предназначен этот UI jQuery. Календарь, или что точнее datepicker…

    Как всегда для начала демонстрация примеров, а затем разберемся, как это использовать у себя. Клик по текстовому полю слева заставит работать календарь с выбором одной даты. Справа — календарь с выбором диапазона дат.



    Demo
    Вы можете скачать исходный код примера, и при наличии библиотеки jQuery воспроизвести это пример на своем сайте.


    исходном коде примера Вы сможете посмотреть стилевую таблицу, отвечающую за отображение календаря и при необходимости отредактировать ее под свой дизайн. Эта часть кода выделена комментариями /* Стили для jQuery UI Datepicker */.

    HTML-код не представляет собой ничего интересного — это простые текстовые поля ввода. Не забудьте только, что наш скрипт будет обращаться к этим элементам по их идентификаторам.

    И наконец приведу очень простой код, который будет вызывать UI Datepicker:


    Элементу с идентификатором #example назначен простой календарь с выбором только одной даты, т.е. это настройки по умолчанию.
    Для элемента #exampleRange заданы опции:
    rangeSelect: true — как раз и задает возможность выбора диапазона дат.
    yearRange: '2000:2010' — установка диапазона дат календаря.
    firstDay: 1 — задает первый день недели, где 1 — это понедельник.
    Вообще настроек масса. Это и установка начальной даты, которая будет выбрана при старте календаря, и возможность установки минимальной и максимальной разрешенной для выбора даты, и даже возможность через опции задать название дней и месяцев на родном языке и многое другое. Полный перечень можно найти здесь.

    Но, честно говоря мне показалось более уместным задать некоторые настройки непосредственно в самом файле ui.datepicker.js, благо сделать это совсем несложно. Тем более, что оригинальный файл, который можно скачать на сайте разработчиков содержит все названия на английском языке, а мы будем использовать русский. Сделать это довольно просто. Надо открыть файл в текстовом редакторе и сделать совсем небольшой перевод функции Datepicker().
    Кому это покажется сложным, может воспользоваться моим переводом. В архив примера включен файл datepicker.translate.js, в котором и содержится перевод.
    Ist.
    Поделиться публикацией
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 49

      +2
      Вот за это огромное спасибо.Выбор диапазона дат - это самое то,что нужно.Спасибо
        +1
        Было бы супер подготовить для базы дату в формате MySQL DATETIME. Или показать пользователю на экране "16 мая 2008", а на выходе получить 2008-05-16 00:00:00.
          +8
          php date transformations?
          date('Y-m-d', strtotime($_POST['date']));

          или применяйте свой, нужен метод:)
            0
            +1 автору, +1 Вам! Отличная и полезная вещь
              0
              Набрал в поле ввода 28.4.2007. Календарь почему-то переделал это в 29.5.2008. wtf?
              • НЛО прилетело и опубликовало эту надпись здесь
            0
            STR_TO_DATE('1.05.2007','%d.%m.%Y')
            0
            Ну и добавить диапазон времени тоже.Т.е. выбор даты первой + время.
              0
              А вот этого, по-моему, в этом календаре нет.
                +2
                Скрипт внизу конечно хорош, но из-за него (по крайней мере в моей Опере) не грузится дальше страница и нельзя комментировать соответственно)
                Я использовал этот скрипт (правда, немного упростив его под свои нужды) — работает хорошо. Вообще люблю jQuery)
                  0
                  Теперь только НЛО может нам помочь.
                    +1
                    Это говорит о том что FireFox лу...без комментариев :)
                      +1
                      Это говорит о том, что ты тег забыл закрыть. Без комментариев.
                        +1
                        Если бы я ифрейм закрыл, он бы не выполнился..
                          0
                          Т.е. ты считаешь что правильно поступил, хоть и знал к чему это приведет?
                      0
                      Временное решение: Инструменты > Настройки - Дополнительно - Содержимое - Параметры стиля > Отобразить - Включить встроенные фреймы (Выключить до тех пор, пока НЛО не покарает шутника :)
                  +17
                  iframe src="
                    +2
                    Пипец :)
                      +3
                      Ты убил оперу и эксплорер.
                        +1
                        отнюдь :)
                          0
                          А ты проверь прежде чем отндькать.
                        0
                        Мило!
                        Теперь добавьте в iframe
                        window.top.location = что-нибуть веселенькое;
                        :)
                        +1
                        а никого не беспокоит, что он весит 62Kb? Или нас осталось очень мало, тех, кто экономит каждый байт?
                        • НЛО прилетело и опубликовало эту надпись здесь
                            0
                            речь в моем посте идет о datepicker'е, открываем пример по ссылке, которую предоставил автор, открываем вкладочку NET в firebug'е и смотрим что ui.datepicker.js весит 62 Kb.
                            0
                            кто ОН весит 62Кб ??? скрипт календаря 3057 байт... а jQuery насколько я помню тоже столько не весит!
                              0
                              3057 байт весит не скрипт календаря, а datepicker.translate.js
                              +1
                              Это полный изврат вешать такой datepicker который весит 62Кб. Полностью согласен.
                              0
                              возможно ли вывести двенадцать календарей, чтобы период выбирать в пределах года?
                                0
                                А кто-нибудь знает такой же лёгкий календарь с выбором времени? Пожалуйста, кроме динарковского (dynarch.com/projects/calendar).
                                –2
                                неужели трудно было демку нормальную нарисовать?! мрак
                                  +1
                                  Часто стали о jQuery писать, что не может не радовать.
                                    –1
                                    Наверно лучше было бы просто дать ссылку на http://plugins.jquery.com/, чем под каждый плагин заводить тему? Их там десятки, можно здорово засорить блог я думаю.
                                      0
                                      Нормально, будет хоть в инфа на русском.
                                        +2
                                        Поддерживаю полностью brook'a, концепция данного ресурса подразумевает не только "что увидел то и написал", а предполагает какие-нибудь размышления автора на ту или инную тему, сравнительный обзор и анализ имеющихся решений и выделение кандидатов предлагающих решения в лидеры, с обоснованием критериев в их выборе. Во всяком случае было бы очень приятно это видеть в данном блоге.
                                        +1
                                        Как же надоели эти примеры! Кто хочет, сам найдет решение такой задачи. В интернете десятки скриптов, реализаций. Тем более эта — не новая. Я уже писал, что не надо превращать хабр в склад таких демок! А теперь каждый день эти банальности на главной! Цьфу!
                                          –1
                                          Дорогие мои!
                                          Вот здесь куча date-picker ов. И аналогичных и не аналогичных и почти аналогичных. А еще можно поиграть с вот этим ресурсом.
                                            0
                                            Ссылки при нулевой карме текстом пишите)
                                              0
                                              пасиб. видимо так и есть
                                              1. http://kelvinluck.com/assets/jquery/datePicker/v2/demo/index.html
                                              2. http://www.datejs.com/
                                            0
                                            В фф и ослике совершенно криво отображается кодировка. Попробую поковырять еще, но кроме оперы нормально пока не отображается нигде больше.
                                              0
                                              Юзайте мультибайтовые символы
                                                0
                                                Да, уже разобрался, спасибо. Суровый копипаст в блокноте поломал кириллицу )
                                              0
                                              Всем кого заинтересовала статья еще одна ссылочка smashingmagazine.com
                                              Я сам недавно искал такой скрипт, но не сразу нашел ибо просто не знал самого термина "дейтпикер"
                                                0
                                                Только, наверное, вот так (http://www.smashingmagazine.com/2007/10/23/online-calendars-and-date-pickers), а то у меня на Вашу ссылочку 404 вылазиет.
                                                0
                                                Спасибо огромное очень помогло! +1
                                                  0
                                                  Самый прикольный датпикер — plugins.jquery.com/project/datepick
                                                  Демки: keith-wood.name/datepick.html
                                                    0
                                                    Кстати, по поводу локализации — jquery-ui.googlecode.com/svn/trunk/ui/i18n/ вот здесь есть несколько языков (даже украинский!). Нужно просто скачать, подключить js файл и вуаля!
                                                      0
                                                      404

                                                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                    Самое читаемое