Автор: Геннадий Эту штуку часто можно встретить, когда сталкиваешься с заполнением форм, где нужно ввести дату или диапазон дат в необходимом формате.
Пользователь обязательно допустит ошибку и введет дату в неправильном формате, затем разберется, где ошибка, а затем уйдет, не заполнив форму.
Этот jQuery UI создан для того, чтобы сделать выбор даты очень простым.
и удобно.
Календарь, или, точнее, средство выбора даты.
Как всегда, начнем с демонстрации примеров, а потом разберемся, как это использовать самим.
Нажатие на текстовое поле слева заставит календарь работать с выбором одной даты.
Справа находится календарь с выбором диапазонов дат. Демо
Вы можете скачать источник пример, и если у вас есть библиотека jQuery, воспроизведите этот пример на своем сайте.В исходном коде примера вы можете увидеть таблицу стилей, отвечающую за отображение календаря, и при необходимости отредактировать ее под свой дизайн.
Ээта часть кода выделена комментариями /* Стили для jQuery UI Datepicker */.
В HTML-коде нет ничего интересного — это просто поля для ввода текста.
Просто помните, что наш скрипт будет обращаться к этим элементам по их идентификаторам.
Наконец, вот очень простой код, который вызывает Datepicker пользовательского интерфейса: Ээлемент с идентификатором #пример назначается простой календарь с выбором только одной даты, т.е.
это настройки по умолчанию.
Для элемента #exampleRange даны варианты: диапазонВыбрать :true — просто указывает возможность выбора диапазона дат. годДиапазон :'2000:2010' - установить диапазон дат календаря.
первый день :1 — указывает первый день недели, где 1 — понедельник.
В общем, настроек очень много.
Сюда входит установка даты начала, которая будет выбрана при запуске календаря, и возможность установить минимальные и максимальные даты, разрешенные для выбора, и даже возможность использовать опции для установки названия дней и месяцев на родном языке и гораздо более.
Полный список можно найти здесь.
Но, честно говоря, мне показалось более целесообразным задать некоторые настройки непосредственно в самом файле.
ui.datepicker.js К счастью, это нетрудно сделать.
При этом в исходном файле, который можно скачать на сайте разработчиков, все названия указаны на английском языке, а мы будем использовать русский.
Это довольно легко сделать.
Вам нужно открыть файл в текстовом редакторе и сделать очень небольшой перевод функции Datepicker().
Кому это сложно, могут воспользоваться моим переводом.
В архив примера входит файл datepicker.translate.js , который содержит перевод.
| Ист. |
-
Приложение Перехватчик-Нг 2.5 Для Android
19 Oct, 24 -
Холодильник Для Заметок Своими Руками
19 Oct, 24 -
Ничего Лишнего. Лучшее Из Теории Ограничений
19 Oct, 24 -
7 Ошибок, Которые Могут Разрушить Мой Бизнес
19 Oct, 24
