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

24

Від автора: вітаю вас, друзі. З цієї статті ви дізнаєтеся, як прикрутити календар для поля input форми Bootstrap. Оскільки ми будемо використовувати CSS фреймворк Bootstrap, скористаємося вже готовим розширенням для Bootstrap, щоб додати календар. Приступимо?

Вихідні файли поточної статті ви можете завантажити за посиланням.

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

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

Почнемо з того, що для поля дати ми можемо використовувати тип поля date, який нам пропонує HTML5.

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

Проте в Firefox, наприклад, жодного календаря не буде, поле залишиться звичайним текстовим инпутом.

Очевидно, таке рішення нас навряд чи влаштує. Тому вдамося до сторонніх бібліотек. Я використовую компонент Data Range Picker для Bootstrap. Скачаємо і підключимо даний компонент.

Власне, нам залишилося лише ініціалізувати компонент. Для цього викличемо однойменний метод плагіна для поля дати:

$(function(){
$(‘#date’).daterangepicker();
});

Отримуємо дуже симпатичний результат:

Щоб календар не конфліктував з календарем Хрому, краще змінити тип поля на date text. Також я додам невелику настройку метод плагіна. Оскільки мені потрібен календар для вибору однієї дати, а не діапазону дат, я скажу про це директорії, передавши необхідний параметр:

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

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

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

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