Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

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

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Date, datetime, datetime-local, month, time и week

.

Date, datetime, datetime-local, month, time и week

В HTML5 появилось несколько типов полей для ввода дат и времени: date, datetime, datetime-local, month, time и week. Все они предусматривают, что вводимые данные соответствуют стандарту ISO 8601.

date

Позволяет ввести дату (год, месяц и день), но не время; к примеру, 2004-06-24.

month

Только год и месяц; например 2012-12. week

Год и номер недели (от 1 to 52); например, 2011-W01 или 2012-W52.

time

Время в 24-часовом формате; например 22:00, а не 10.00 вечера, datetime

Дата и время, разделенные литерой «Т» с возможностью указания смещения часового пояса (если время дано по Гринвичу, ставится буква «Z»). Например «2012-03-17Т10:45-5:00» означает 10:45 утра 17 марта 2012 г. по Гринвичу минус 5 часов (стандартное восточное время).

 

datetime-local

То же, что и в предыдущем случае, но без указания часового пояса.

Естественно, что самый востребованный из этих типов данных — date. К настоящему моменту поддержка этого типа данных есть в Opera, Safari и Chrome.

Давайте изменим в нашей форме дату начала подписки с применением этого типа вводимых данных.

re.gister.html
(фрагмент)

Date, datetime, datetime-local, month, time и week

Теперь у нас есть календарное поле, которое мы увидим, просматривая наш сайт, к примеру, в Opera (рис. 4.11). К сожалению, пока этот элемент не поддается стилизации.

Для других полей ввода времени и дат Opera отображает то же самое окно, но пользователю доступны для изменения не все отображаемые данные. Например, по щелчку меняются не дни, а сразу месяцы или недели.

В настоящее время WebKit обеспечивает частичную поддержку типа date. Поле выглядит точно так же, как для типа number, со стрелками вверх и вниз. Safari немного чудит с этим элементом: стартовая дата соответствует первому дню григорианского календаря: 1582-10-15. В Chrome по умолчанию высвечивается 0001-01-01, а максимальная дата в будущем — 275760-09-13. Более разумно ведет себя Opera: здесь по умолчанию предлагается текущая дата. В силу этих странностей мы настоятельно рекомендуем включать атрибуты min и max при использовании всех элементов выбора даты (но не времени).

Date, datetime, datetime-local, month, time и week

Рис. 4.11. Поле ввода даты в браузере Opera

Атрибут placeholder, который мы добавили к нашему полю даты начала, не виден в Opera, но убирать его нельзя: он нужен пользователям других браузеров.

В конечном счете, когда все браузеры полноценно станут поддерживать новые элементы, плейсхолдер будет необходим только для текстовых полей, поиска, URL, телефонных номеров, электронной почты и для ввода паролей. Но до того плейсхолдер — отличный способ подсказать пользователям, какие данные вы от них хотите получить.

Со всеми перечисленными типами полей может использоваться атрибут step. Например, step="6" в поле month позволит пользователю выбрать либо январь, либо июль. С полями типа time и datetime значение атрибута step указывается в секундах, поэтому step="900" означает шаг в 15 минут.


.

Читайте так же:
Not found