Библиотека jQuery UI. Виджет календарь

Библиотека jQuery UI. Виджет календарь

От автора: приветствую вас, друзья. В этой статье мы с вами продолжим знакомиться с библиотекой jQuery UI. В статье мы узнаем, как установить и настроить виджет календарь (datepicker), который идеально подходит для поля заполнения даты, поскольку вместо ручного заполнения даты предлагает симпатичный календарик, в котором можно выбрать нужную дату.

Итак, следующий на очереди плагин библиотеки jQuery UI, с которым мы поработаем, будет виджет Datepicker (календарь). Как следует из названия, плагин предлагает нам виджет календаря, который можно добавить к полю формы для выбора даты.

Зачем нам может понадобиться этот виджет? Например, у нас есть форма регистрации пользователей, в которой есть поле для ввода даты рождения пользователя. При этом дата рождения нам нужно в строго определенном формате. Календарь идеально здесь поможет, поскольку мы не даем пользователю вводить дату вручную, а предоставляем выбрать дату из календаря, ну а календарь уже вставит в поле выбранную дату в нужном формате.

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

Примеры и документацию по плагину можно найти на соответствующей странице документации. В базовом примере мы видим поле формы, клик по которому вызовет компактный календарик.

Библиотека jQuery UI. Виджет календарь

Итак, давайте создадим аналогичное поле для ввода даты на нашей странице:

Библиотека jQuery UI. Виджет календарь

А теперь, как обычно, чуток магии jQuery UI для добавления календаря к имеющемуся полю:

Библиотека jQuery UI. Виджет календарь

Супер! Календарь появился, плагин Datepicker работает и очень прост в использовании. Давайте теперь попробуем выбрать какую-нибудь дату, скажем 31 декабря 2016 года.

Библиотека jQuery UI. Виджет календарь

Дата выбирается и подставляется в поле, вот только формат даты для нас не очень привычен. Однако это легко поправить с помощью настроек плагина Datepicker. В частности, нам поможет опция dateFormat:

Библиотека jQuery UI. Виджет календарь

Вот теперь отлично, дата представлена в более понятном виде – Год-Месяц-Число. В следующих статьях мы продолжим знакомиться с другими плагинами библиотеки jQuery UI. Ну а пока все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!

Метки:

Похожие статьи:

Комментарии Вконтакте: