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

Дата публикации: 2016-10-19

От автора: приветствую вас, друзья. Из этой статьи вы узнаете, как прикрутить календарь для поля input формы Bootstrap. Поскольку мы будем использовать CSS фреймворк Bootstrap, воспользуемся уже готовым расширением для Bootstrap, чтобы добавить календарь. Приступим?

Исходные файлы текущей статьи вы можете скачать по ссылке.

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

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

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

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

1	<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();
});

$(function(){

$('#date').daterangepicker();

});

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

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

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

$(function(){

$('#date').daterangepicker({

singleDatePicker: true,

});

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

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

$(function(){

$('#date').daterangepicker({

singleDatePicker: true,

locale: {

format: 'DD.MM.YYYY'

}

});

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

Метки: формы