Дата и время
Наряду с календарём, предназначенном для указания даты, месяца или недели, иногда возникает необходимость вводить ещё и время, например, для точной публикации сообщения. Для подобных ситуаций используется поле datetime и datetime-local, синтаксис у них следующий.
<input type="datetime" атрибуты>
<input type="datetime-local" атрибуты>Как и в случае с календарём пока поддержка этого поля имеется только в браузерах Opera (рис. 1) и Chrome (рис. 2). Атрибуты те же, что и для календаря.
Рис. 1. Вид поля для выбора даты и времени в Opera
Рис. 2. Ввод даты и времени в Chrome
Opera предоставляет удобный виджет сочетающий календарь и ввод времени, Chrome же ограничивается только полем, в котором можно прокручивать секунды или вводить текст вручную. Данные на сервер по умолчанию пересылаются в виде ГГГГ-ММ-ДДTчч:ммZ (например: 2015-09-25T12:15Z), где вначале указывается год, месяц и день, затем после латинской буквы T идут часы с минутами. В теории вместо Z указывается часовой пояс (например: +08:00 или -04:00), а также по желанию секунды с дробной частью, но на практике всё ограничивается только минутами и без часового пояса. Более того, при их наличии Chrome выводит сообщение «Недопустимые данные» и не отправляет введённый текст.
В примере 1 показано создание поля для ввода даты и времени.
Пример 1. Дата и время
HTML5IE 7IE 8IE 9Cr 13Op 11Sa 5Fx 6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Дата и время</title>
</head>
<body>
<form>
<p>Время создания публикации</p>
<p><input type="datetime" name="created"></p>
<p><input type="submit"></p>
</form>
</body>
</html>Разница между значениями datetime и datetime-local заключается в добавлении часового пояса для datetime. На деле же пересылаются те же самые данные, только без Z в конце (2015-09-25T12:15).
Для ввода только времени без даты применяется <input type="time">, это поле также работает только в Opera и Chrome.
В примере 2 показано создание поля для ввода времени в указанном диапазоне.
Пример 2. Ввод времени
HTML5IE 7IE 8IE 9Cr 13Op 11Sa 5Fx 6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Время</title>
</head>
<body>
<form>
<p>В какое время запускать Cron?</p>
<p><input type="time" name="cron" value="03:15" min="00:01" max="06:00"></p>
<p><input type="submit"></p>
</form>
</body>
</html>В данном примере значение изначально задано с помощью атрибута value, а минимальное и максимальное время установлено через min и max.