Календарь

Выбор даты применяется на сайтах, торгующих авиа и железнодорожными билетами, ведь посетителя интересует заказ билета на определённый день. Календари также применяются в блогах, где записи систематизируются по дате, и сайтах, связанных с разными событиями, например, спортивными. Так или иначе, календарь востребован и может быть добавлен следующим образом.

<input type="date" атрибуты>

На сервер данные передаются в формате ГГГГ-ММ-ДД, например, 1998-08-17, а вид календаря может различаться в зависимости от браузера. Полностью поддерживает календарь только Opera и Chrome (рис. 1).

Календарь в браузере Opera

Рис. 1. Календарь в браузере Opera

В примере 1 показано создание календаря для выбора произвольной даты.

Пример 1. Календарь

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Календарь</title> </head> <body> <form> <p>Выберите дату: <input type="date" name="calendar"> <input type="submit" value="Отправить"></p> </form> </body> </html>

Допустимо ограничить ввод даты заданным значением через атрибуты min и max, они соответственно указывают нижнюю и верхнюю дату. Так, если вам требуется сузить диапазон ввода до ±3 дней от даты 01.06.2017, то код запишется как в примере 2.

Пример 2. Ограничение даты

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Календарь</title> </head> <body> <form> <p>Выберите дату: <input type="date" name="calendar" value="2017-06-01" max="2017-06-04" min="2017-05-29"> <input type="submit" value="Отправить"></p> </form> </body> </html>

Текущая дата, заданная через атрибут value, подсвечивается фоном, неактивные дни, которые нельзя выбрать — серым цветом (рис. 2).

Календарь с диапазоном ввода

Рис. 2. Календарь с диапазоном ввода

Кроме традиционного календаря, в котором можно выбрать дату, месяц и год, существует и календарь только для ввода месяца и недели. Они записываются в таком виде.

<input type="month">
<input type="week">

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

Выбор месяца

Рис. 3 Выбор месяца

На сервер данные поля type="month" пересылаются как ГГГГ-ММ, например, 2017-10.

Похожим образом выглядит и виджет для выбора недели (рис. 4), где дополнительно выводится номер недели и выбрать можно только его. На сервер при этом значение отправляется как 2017-W38, где вначале указывается год, затем через дефис W и после него номер недели от начала года.

Выбор недели

Рис. 4. Выбор недели

В примере 3 показано создание поля для ввода месяца.

Пример 3. Выбор месяца

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Календарь</title> </head> <body> <form> <p>Укажите месяц: <input type="month" name="month"> <input type="submit" value="Отправить"></p> </form> </body> </html>

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 11.03.2020
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты