От автора: приветствую вас, друзья. В этой статье мы с вами продолжим знакомиться с библиотекой jQuery UI. В статье мы узнаем, как установить и настроить виджет календарь (datepicker), который идеально подходит для поля заполнения даты, поскольку вместо ручного заполнения даты предлагает симпатичный календарик, в котором можно выбрать нужную дату.
Итак, следующий на очереди плагин библиотеки jQuery UI, с которым мы поработаем, будет виджет Datepicker (календарь). Как следует из названия, плагин предлагает нам виджет календаря, который можно добавить к полю формы для выбора даты.
Зачем нам может понадобиться этот виджет? Например, у нас есть форма регистрации пользователей, в которой есть поле для ввода даты рождения пользователя. При этом дата рождения нам нужно в строго определенном формате. Календарь идеально здесь поможет, поскольку мы не даем пользователю вводить дату вручную, а предоставляем выбрать дату из календаря, ну а календарь уже вставит в поле выбранную дату в нужном формате.
Это первый и главный из плюсов виджета Datepicker. Второй немаловажный плюс – это красота. Посетителям нравятся разные красивые и необычные штуки на сайте, а календарь, безусловно, является таковой. И хотя многие уже привыкли к таким календарям, все равно календари не утратили своей привлекательности, это удобно, практично и красиво. Ко всему прочему, Календарь, как и прочие плагины jQuery UI, устанавливается в считанные минуты и гибко настраивается.
Примеры и документацию по плагину можно найти на соответствующей странице документации. В базовом примере мы видим поле формы, клик по которому вызовет компактный календарик.
Итак, давайте создадим аналогичное поле для ввода даты на нашей странице:
|
1 2 3 4 5 6 7 8 |
<div class="container content"> <form class="form-inline"> <div class="form-group"> <label for="date">Дата: </label> <input type="text" class="form-control" id="date"> </div> </form> </div> |
А теперь, как обычно, чуток магии jQuery UI для добавления календаря к имеющемуся полю:
|
1 2 3 |
$(function(){ $("#date").datepicker(); }); |
Супер! Календарь появился, плагин Datepicker работает и очень прост в использовании. Давайте теперь попробуем выбрать какую-нибудь дату, скажем 31 декабря 2016 года.
Дата выбирается и подставляется в поле, вот только формат даты для нас не очень привычен. Однако это легко поправить с помощью настроек плагина Datepicker. В частности, нам поможет опция dateFormat:
|
1 2 3 |
$("#date").datepicker({ dateFormat: "yy-mm-dd" }); |
Вот теперь отлично, дата представлена в более понятном виде – Год-Месяц-Число. В следующих статьях мы продолжим знакомиться с другими плагинами библиотеки jQuery UI. Ну а пока все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!
