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

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

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

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

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

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

<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. Виджет календарь

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

$(function(){
 $("#date").datepicker();
});

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

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

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

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

$("#date").datepicker({
 dateFormat: "yy-mm-dd"
});

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

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

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree