Значение date
Синтаксис
HTML
<input type="date">
Описание
Тип date (от англ. "date" ‒ «дата») создаёт поле ввода даты.
Внешний вид
‒ поле ввода даты;
‒ наведение курсора;
‒ фокус;
‒ интерфейс выбора даты.
Примечание
- Дата, выбранная с помощью поля ввода даты, присваивается данному элементу в виде специального значения атрибута «
value». - На сервер вместе с остальными данными формы отправляется только имя и значение поля ввода даты.
Поддержка браузерами
Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.
Спецификация
| Верс. | Раздел |
|---|---|
| HTML | |
| 2.0 | |
| 3.2 | |
| 4.01 | |
| 5.0 | 4.10.5.1.7 Date state (type=date) |
| 5.1 | 4.10.5.1.8. Date state (type=date) |
| XHTML | |
| 1.0 | |
| 1.1 | |
Сопутствующие атрибуты
- autocomplete
- Автозаполнение значения поля ввода даты.
- autofocus
- Автоматческая фокусировка на поле ввода даты после полной загрузки страницы.
- disabled
- Блокировка поля ввода даты.
disabled="disabled" - form
- Присоединение поля ввода даты к форме.
- list
- Создание списка рекомендованных вариантов вводимой даты.
- max
- Указывает, верхний (максимальный) предел ввода даты.
Примечание: значение данного атрибута имеет формат «
гггг-мм-дд». - min
- Указывает, нижний (минимальный) предел ввода даты.
Примечание: значение данного атрибута имеет формат «
гггг-мм-дд». - name
- Присвоение уникального имени (идентификатора) полю ввода даты.
- readonly
- Указывает, что поле ввода даты доступно только для чтения (изменение/редактирование запрещено).
- required
- Указывает что поле ввода даты обязательно для заполнения.
- step
- Устанавливает интервал увеличения числового значения даты. (Интервал применяется к дням.)
- value
- Указывает значение даты (отправляется на сервер или используется скриптами).
value="2015-05-09"Примечание: значение данного атрибута имеет формат «
гггг-мм-дд». - Глобальные атрибуты
- accesskey, class, contenteditable, data-*, dir, draggable, dropzone, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang
Пример использования
Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Значение date (input-type)</title>
</head>
<body>
<h1>Пример с полем ввода даты "type=date"</h1>
<fieldset> <legend><b>Введите любую дату</b></legend>
<input type="date" list="dateList">
<datalist id="dateList">
<option value="1991-12-08" label="Основание СНГ">
<option value="1992-05-15" label="Основание ОДКБ">
<option value="2001-06-15" label="Основание ШОС">
</datalist>
</fieldset>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Значение date (input-type)</title>
</head>
<body>
<h1>Пример с полем ввода даты "type=date"</h1>
<fieldset> <legend><b>Введите любую дату</b></legend>
<input type="date" list="dateList">
<datalist id="dateList">
<option value="1991-12-08" label="Основание СНГ">
<option value="1992-05-15" label="Основание ОДКБ">
<option value="2001-06-15" label="Основание ШОС">
</datalist>
</fieldset>
</body>
</html>
Значение date (input-type)