Календарь

« Апрель 2024 »
Пн	Вт	Ср	Чт	Пт	Сб	Вс
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Опрос

Какие статьи добавлять?

Календарь для поля input формы

Автор: administrator Дата: 3-11-2018, 01:24 Категория: Прочие материалы

В современных сайтах удобство пользователя — один из важнейших аспектов, которыми должен руководствоваться разработчик и владелец сайта. Каждый старается привлечь пользователя если не качественным контентом, так хотя бы какой-нибудь красивой и удобной фишкой. В идеале, конечно же, было бы желательно иметь обе вещи: и контент, и всевозможные красивости и удобства.

Одним из таких удобств является календарь для поля ввода даты, который позволяет пользователю выбрать дату из выпадающего календарика вместо набора даты вручную. Выглядит это достаточно эффектно и, как правило, нравится рядовому пользователю. Хотя, конечно же, такой штукой уже никого не удивить сегодня.

Начнем с того, что для поля даты мы можем использовать тип поля date, который нам предлагает HTML5.

<input type="date" class="form-control" id="date" name="date" placeholder="Дата" required>

В результате в Chrome мы получим достаточно симпатичный календарик при клике по полю даты.

Однако в Firefox, к примеру, никакого календаря не будет, поле останется обычным текстовым инпутом.

Очевидно, такое решение нас вряд ли устроит. Поэтому прибегнем к сторонним библиотекам. Я использую компонент Data Range Picker для Bootstrap. Скачаем и подключим данный компонент.


<link rel="stylesheet" href="daterangepicker/daterangepicker.css">
<script src="daterangepicker/moment.js"></script>
<script src="daterangepicker/daterangepicker.js"></script>

Собственно, нам осталось лишь инициализировать компонент. Для этого вызовем одноименный метод плагина для поля даты:


$(function(){
 $('#date').daterangepicker();
});

Получаем очень симпатичный результат:

Чтобы календарь не конфликтовал с календарем Хрома, лучше изменить тип поля с date на text. Также я добавлю небольшую настройку в метод плагина. Поскольку мне нужен календарь для выбора одной даты, а не диапазона дат, я скажу об этом плагину, передав необходимый параметр:


$(function(){
 $('#date').daterangepicker({
 singleDatePicker: true,
 });
});

Также изменю формат представления даты на более привычный нам:


$(function(){
 $('#date').daterangepicker({
 singleDatePicker: true,
 locale: {
 format: 'DD.MM.YYYY'
 }
 });
});

Исходные файлы вы можете скачать по ссылке ниже.
Скачать файл: file.rar [606,49 Kb] (cкачиваний: 16)

Как видите, все достаточно просто. Можете поиграться с другими опциями компонента, настраивая календарь под себя. На этом мы завершим текущую статью. В следующей мы узнаем, как установить календарь из библиотеки jQueryUI. Удачи!

Просмотров: 1 085 Напечатать Жалоба

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