Элемент HTML <time>
Элемент <time> представляет собой дату, время или период времени, представленные в машинночитаемом формате. Он может быть полезен для создания расписаний, архивов или других функций, связанных со временем. WordPress использует этот элемент в базовой теме оформления. Ещё один пример использования <time> — Reddit:
Краткая история
Жизненный путь этого элемента был нелёгким. Его добавили в спецификацию HTML5 в 2009 году. Два года спустя, в 2011, его убрали и заменили на гораздо более широкий <data>. Однако в этом же году его вернули и добавили новых возможностей. Сейчас его можно уверенно использовать.
Ситуацию хорошо описал Брюс Лоусон (убрали, вернули, текущее положение дел). [Та же история на Хабре: убрали, вернули]. Классический пример того, как реакция сообщества разработчиков влияет на развитие HTML.
Тэг и атрибут
<time> можно использовать как обычный тег HTML. Вот простой пример, который представляет ноябрь 2011:
В этом примере текст внутри тега является валидным значением атрибута datetime (о котором подробнее пойдёт речь дальше). Однако это совершенно необязательно. Это значение можно переместить в атрибут, указанный явно, а внутри тега использовать произвольный текст:
Именно атрибут datetime придаёт этому элементу его уникальные свойства. Он представляет в машинночитаемом виде любую дату, вермя или интервал, относящийся к тексту внутри тега. Так как он предназначен для компьютеров, его формат жестко определён.
В большинстве случаев текст, заключенный в тег, представляет то же самое время в удобочитаемом виде:
10 способов указания времени
Год и месяц
Очень просто: год идёт перед месяцем.
Год, затем месяц, затем день.
Дата без года
Только время
Часы, минуты, секунды. Секунды указывать необязательно. Доли секунды указываются с точностью до третьего знака.
Дата и время
Комбинация даты и времени, разделённых заглавной «T». Букву «T» можно заменить на пробел.
Часовой пояс
Начинается с плюса или минуса. Двоеточие необязательно. Всемирное координированное время (UTC, +00:00) можно заменить заглавной «Z».
Местная дата и время
Дата и время с указанием часового пояса, вместо «T» можно использовать пробел.
Год и неделя
Год, затем заглавная «W» и номер недели.
Только год
Временной интервал (первый способ)
«P», затем опционально — количество дней, «T», затем опционально — количество часов, минут и секунд. Все буквы только в верхнем регистре.
Временной интервал (второй способ)
Недели, дни, минуты, секунды. Буквы могут быть в любом регистре, пробелы необязательны.
Примеры
Проблемы с форматирование datetime?
Эта небольшая форма на CodePen поможет преобразовать значения даты и времени в корректный тег <time> :
Поддержка в брузерах
В чём преимущества использования <time>?
Здесь я процитирую Брюса Лоусона, так как, пожалуй, лучше и не скажешь:
Варианты использования однозначного указания даты придумать нетрудно. Браузер может предложить пользователю добавить событие на странице в его календарь. Браузер в Таиланде может автоматически преобразовать дату в григорианском календаре в традиционный буддийский. Японский браузер может показать <time>16:00</time> как «16:00時». Агрегаторы контента могут автоматически генерировать временную шкалу событий.
Поисковики могут улучшать результаты выдачи. Например, недавно был сильный снегопад, я погуглил и обнаружил, что школа, в которую ходят мои дети, сегодня закрыта. Только когда из школы позвонили и спросили, почему мои дети не пришли, я обнаружил, что внизу страницы с новостью о закрытии школы написано мелким шрифтом: «Опубликовано 5 января 2008». Поисковики вполне могли бы располагать недавние события выше в выдаче.
Ещё одна полезная мелочь
А вот пример кода для Rails, который выводит время в этих трёх видах:
Html5 поле ввода даты с временем
Элементы типа date создают поля ввода и позволяют пользователю ввести дату, либо использовать text box для автоматической проверки контента или использовать специальный интерфейс date picker. Возвращаемое значение включает год, месяц, день, но не время. Используйте поля ввода time (en-US) или datetime-local, чтобы вводить время или дату+время соответственно.
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на внесение изменений.
Среди браузеров со своим интерфейсом для выбора даты, есть интерфейс браузеров Chrome и Opera, который выглядит так:
В Edge он выглядит так:
А в Firefox выглядит так:
Значение
Вы также можете получить или установить значение даты в JavaScript с помощью свойств value и valueAsNumber элемента input. Например:
Дополнительные атрибуты
| Атрибут | Описание |
|---|---|
| max | Максимально возможная дата для установки |
| min | Минимально возможная дата для установки |
| step | Шаг (в днях), с которым будет изменяться дата при нажатии кнопок вниз или вверх данного элемента |
Строковое значение any означает, что никакое значение шага не задано и допустимо любое значение (в пределах других ограничений, таких как min и max ).
Примечание: Когда значение, введённое пользователем, не подходит под заданное значение шага, user agent может округлить его до ближайшего допустимого значения с приоритетом в большую сторону в том случае, если значение находится ровно посередине шага.
Для полей ввода date значение step задаётся в днях; и является количеством миллисекунд, равное 86 400 000 умножить на значение step (получаемое числовое значение хранится в миллисекундах). Стандартное значение step равно 1, что означает 1 день.
Использование полей ввода c типом date
На первый взгляд, элемент выглядит заманчиво — он предоставляет лёгкий графический интерфейс для выбора даты, нормализует формат даты, отправляемой на сервер независимо от локальных настроек пользователя. Тем не менее, есть проблемы с в связи с ограниченной поддержкой браузеров.
Надеемся, со временем поддержка браузерами станет повсеместной, и эта проблема исчезнет.
Как использовать date?
Установка максимальной и минимальной даты
В результате выполнения кода, пользователь сможет выбрать любой день апреля 2017 года, но не сможет выбрать и даже просмотреть дни других месяцев и годов, в том числе через виджет date picker.
Controlling input size
Validation
By default, does not apply any validation to entered values. The UI implementations generally don’t let you enter anything that isn’t a date — which is helpful — but you can still leave the field empty or (in browsers where the input falls back to type text ) enter an invalid date (e.g. the 32nd of April).
If you use min and max to restrict the available dates (see Setting maximum and minimum dates), supporting browsers will display an error if you try to submit a date that is outside the set bounds. However, you’ll have to check the results to be sure the value is within these dates, since they’re only enforced if the date picker is fully supported on the user’s device.
In addition, you can use the required attribute to make filling in the date mandatory — again, an error will be displayed if you try to submit an empty date field. This, at least, should work in most browsers.
Let’s look at an example — here we’ve set minimum and maximum dates, and also made the field required:
If you try to submit the form with an incomplete date (or with a date outside the set bounds), the browser displays an error. Try playing with the example now:
Here’s a screenshot for those of you who aren’t using a supporting browser:
Here’s the CSS used in the above example. Here we make use of the :valid and :invalid CSS properties to style the input based on whether or not the current value is valid. We had to put the icons on a next to the input, not on the input itself, because in Chrome the generated content is placed inside the form control, and can’t be styled or shown effectively.
Important: HTML form validation is not a substitute for scripts that ensure that the entered data is in the proper format. It’s far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It’s also possible for someone to simply bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, is of the wrong type, and so forth).
Handling browser support
As mentioned above, the major problem with using date inputs at the time of writing is browser support. As an example, the date picker on Firefox for Android looks like this:
Non-supporting browsers gracefully degrade to a text input, but this creates problems both in terms of consistency of user interface (the presented control will be different), and data handling.
One way around this is to put a pattern attribute on your date input. Even though the date input doesn’t use it, the text input fallback will. For example, try viewing the following example in a non-supporting browser:
The best way to deal with dates in forms in a cross-browser way at the moment is to get the user to enter the day, month, and year in separate controls ( elements being popular; see below for an implementation), or to use a JavaScript library such as jQuery date picker.
Examples
In this example we create two sets of UI elements for choosing dates: a native picker and a set of three elements for choosing dates in older browsers that don’t support the native input.
The HTML looks like so:
The months are hardcoded (as they are always the same), while the day and year values are dynamically generated depending on the currently selected month and year, and the current year (see the code comments below for detailed explanations of how these functions work.)
JavaScript
Note: Remember that some years have 53 weeks in them (see Weeks per year)! You’ll need to take this into consideration when developing production apps.
Html5 поле ввода даты с временем
элемент типа datetime-local создаёт поля ввода, позволяющие легко ввести дату и время — год, месяц, день, часы и минуты.
Для тех из вас, кто не использует поддерживающий браузер, Chrome/Opera datetime-local control выглядит как скриншот ниже. Нажатие на стрелку вниз с правой стороны приводит к выбору даты, чтобы вы могли выбрать дату; вы должны ввести время вручную.
Значение
DOMString представление значения даты, введённой во входные данные. Вы можете установить значение по умолчанию для ввода, включая дату внутри value атрибута, как:
Вы также можете получить и установить значение даты в JavaScript, используя HTMLInputElement.value свойство, например:
Использование локальных входных данных datetime
Ввод даты и времени выглядит удобно на первый взгляд — он обеспечивает простой пользовательский интерфейс для выбора даты и времени, и они нормализуют формат данных, отправляемых на сервер, независимо от локали пользователя. Тем не менее, есть проблемы с из-за ограниченной поддержки браузера.
Базовое использование локальных полей ввода datetime
Самое простои использование включает комбинацию базового и элемента, как в примере ниже:
Установка максимума и минимума даты и времени
Вы можете использовать min и max атрибуты чтобы ограничить дату/время, которое может выбрать пользователь. В примере ниже мы устанавливает минимальные дату и время в 2017-06-01T08:30 и максимальные в 2017-06-30T16:30 :
Примечание: Существует возможность использовать step атрибут для того, чтобы установить количество дней, которые будут пропущены каждый раз, когда дата увеличивается (например, если вы хотите сделать доступными для выбора только Субботы). Однако, на момент написание этой статьи это нет эффективной реализации этой функции.
Controlling input size
Setting timezones
One thing the datetime-local input type doesn’t provide is a way to set the timezone/locale of the datetime. This was available in the datetime input type, but this type is now obsolete, having been removed from the spec. The main reasons why this was removed are a lack of implementation in browsers, and concerns over the user interface/experience. It is easier to just have a control (or controls) for setting the date/time and then deal with the locale in a separate control.
For example, if you are creating a system where the user is likely to already be logged in, with their locale already set, you could provide the timezone in a hidden input type. For example:
On the other hand, if you were required to allow the user to enter a timezone along with a datetime entry, you could provide a means of inputting a timezone, such as a element:
In either case, the timedate and timezone values would be submitted to the server as separate data points, and then you’d need to store them appropriately in the database on the server-side.
Note: The above code snippet is taken from All world timezones in an HTML select element.
Validation
By default, does not apply any validation to entered values. The UI implementations generally don’t let you enter anything that isn’t a datetime — which is helpful — but you can still fill in no value and submit, or enter an invalid datetime (e.g. the 32th of April).
You can use min and max to restrict the available dates (see anch(«Setting maximum and minimum dates»)), and in addition use the required attribute to make filling in the date mandatory. As a result, supporting browsers will display an error if you try to submit a date that is outside the set bounds, or an empty date field.
Let’s look at an example — here we’ve set minimum and maximum datetimes, and also made the field required:
If you try to submit the form with an incomplete date (or with a date outside the set bounds), the browser displays an error. Try playing with the example now:
Here’s’a screenshot for those of you who aren’t using a supporting browser:
Here’s the CSS used in the above example. Here we make use of the :valid and :invalid CSS properties to style the input based on whether or not the current value is valid. We had to put the icons on a next to the input, not on the input itself, because in Chrome the generated content is placed inside the form control, and can’t be styled or shown effectively.
Important: HTML form validation is not a substitute for scripts that ensure that the entered data is in the proper format. It’s far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It’s also possible for someone to simply bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, is of the wrong type, and so forth).
Handling browser support
As mentioned above, the major problem with using date inputs at the time of writing is browser support — only Chrome/Opera and Edge support it on desktop, and most modern browsers on mobile. As an example, the datetime-local picker on Firefox for Android looks like this:
Non-supporting browsers gracefully degrade to a text input, but this creates problems both in terms of consistency of user interface (the presented control will be different), and data handling.
One way around this is to put a pattern attribute on your datetime-local input. Even though the datetime-local input doesn’t use it, the text input fallback will. For example, try viewing the following demo in a non-supporting browser:
And what user is going to understand the pattern they need to enter the time and date in?
We still have a problem.
The best way to deal with dates in forms in a cross-browser way at the moment is to get the user to enter the day, month, year, and time in separate controls ( elements being popular — see below for an implementation), or use JavaScript libraries such as jQuery date picker, and the jQuery timepicker plugin.
Examples
In this example we create two sets of UI elements for choosing datetimes — a native picker, and a set of five elements for choosing dates and times in older browsers that don’t support the native input.
The HTML looks like so:
The months are hardcoded (as they are always the same), while the day and year values are dynamically generated depending on the currently selected month and year, and the current year respectively (see the code comments below for detailed explanations of how these functions work.) We also decided to dynamically generate the hours and months, as there are so many of them!
Руководство по новым типам input в HTML5
В этом разделе мы кратко рассмотрим каждый из новых типов :
Input type Color
Тип color позволяет пользователю выбрать цвет из палитры и возвращает значение цвета в шестнадцатеричном формате ( #rrggbb ). Если вы не укажете значение, по умолчанию вернется #000000 — это черный цвет.
Посмотрим следующий пример, чтобы понять, как это работает:
Ввод цвета (т.е. type=»color» ) поддерживается во всех современных веб-браузерах, таких как Firefox, Chrome, Opera, Safari (12.1+), Edge (14+). Не поддерживается Microsoft Internet Explorer и более старой версией браузеров Apple Safari.
Input type Date
Тип date позволяет пользователю выбрать дату в раскрывающемся календаре.
Значение даты включает год, месяц и день, но не время.
Ввод даты (т.е. type=»date» ) поддерживается браузерами Chrome, Firefox, Opera и Edge. Не поддерживается браузерами Internet Explorer и Safari.
Input type Datetime-local
Тип datetime-local позволяет пользователю выбирать как локальную дату и время, включая год, месяц и день, так и время в часах и минутах.
Посмотрим следующий пример, чтобы понять, как это работает:
Тип ввода type=»datetime-local» не поддерживается браузерами Firefox, Safari и Internet Explorer. В настоящее время поддерживается браузерами Chrome, Edge и Opera.
Input type Email
Посмотрим на примере:
Проверка правильности ввода электронной почты (то есть type=»email» ) поддерживается всеми основными браузерами, такими как Firefox, Chrome, Safari, Opera, Internet Explorer 10 и выше.
Input type Month
Тип month позволяет пользователю выбрать месяц и год из выпадающего календаря.
Значением является строка в формате «YYYY-MM», где YYYY — четырехзначный формат года, а MM — номер месяца. Давайте посмотрим пример, чтобы увидеть, как это работает:
Тип ввода type=»month» не поддерживается браузерами Firefox, Safari и Internet Explorer. В настоящее время поддерживается в браузерах Chrome, Edge и Opera.
Input type Number
Следующий пример позволит вам ввести числовое значение от 1 до 10.
Ввод чисел (т.е. type=»number» ) поддерживается всеми основными веб-браузерами, такими как Firefox, Chrome, Safari, Opera, Internet Explorer 10 и выше. Internet Explorer, распознает число, но не предоставляет кнопок увеличения и уменьшения.
Input type Range
Посмотрим на примере:
Ввод диапазона (то есть type=»range» ) поддерживается всеми основными веб-браузерами, такими как Firefox, Chrome, Safari, Opera, Internet Explorer 10 и выше.
Input type Search
Тип search можно использовать для создания полей поиска.
Поле поиска обычно ведет себя как обычное текстовое поле, но в некоторых браузерах, таких как Chrome и Safari, как только вы начинаете вводить текст в поле, в правой части поля появляется небольшой крестик, который позволяет быстро очистить поле поиска. Давайте посмотрим на примере:
Ввод поиска (то есть type=»search» ) поддерживается всеми основными веб-браузерами, такими как Firefox, Chrome, Safari, Opera, Internet Explorer 10 и выше.
Input type Tel
Тип tel можно использовать для ввода номера телефона.
Проверка ввода телефона (т.е. type=»tel» ) в настоящее время не поддерживается ни одним браузером, поскольку формат телефонных номеров сильно различается в разных странах, но он все еще полезен. Мобильные браузеры отображают цифровую клавиатуру для ввода телефонных номеров.
Input type Time
Тип time можно использовать для ввода времени (часы и минуты).
Браузер может использовать 12- или 24-часовой формат для ввода времени, основываясь на настройках времени локальной системы пользователя.
Тип ввода type=»time» не поддерживается браузерами Internet Explorer и Safari. В настоящее время поддерживается браузерами Chrome, Firefox, Edge и Opera.
Input type URL
Тип url может использоваться для ввода URL или веб-адресов.
Проверка ввода URL (т.е. type=»url» ) поддерживается всеми основными браузерами, такими как Firefox, Chrome, Safari, Opera, Internet Explorer 10 и выше.
Input type Week
Тип week позволяет пользователю выбрать неделю и год из раскрывающегося календаря.
Посмотрим следующий пример, чтобы понять, как это работает:
Тип type=»week» не поддерживается браузерами Firefox, Safari и Internet Explorer. В настоящее время поддерживается браузерами Chrome, Edge и Opera.
Похожие посты
Руководство по тегам и элементам в HTML
Руководство по заголовкам в HTML
; чем выше уровень заголовка, тем больше его важность — поэтому тег
определяет самый важный заголовок, а тег
определяет наименее важный заголовок в документе. По умолчанию браузеры отображают заголовки более крупным и жирным шрифтом, чем обычный…
Руководство по мета-тегам в HTML
Насколько публикация полезна?
Нажмите на звезду, чтобы оценить!
Средняя оценка 5 / 5. Количество оценок: 1
Оценок пока нет. Поставьте оценку первым.
Разработка сайтов для бизнеса
Если у вас есть вопрос, на который вы не знаете ответ — напишите нам, мы поможем разобраться. Мы всегда рады интересным знакомствам и новым проектам.
Дата и время в INPUT
Помогите пожалуйста вывести результат скрипта в INPUT!)
Помощь в написании контрольных, курсовых и дипломных работ здесь.
Текущие «дата и время» в input
Хай. Не особо понимаю как подойти к этому вопросу. Есть на сайте форма, которую надо заполнять.
Расписание. Хранит список (время начала, время окончания, дата, место, текст (комментарий)
Расписание. Хранит список (время начала, время окончания, дата, место, текст (комментарий)).
и желательно вот этот скрипт
Решение
Benzo_gang, фантазируете?
и зачем?
просто потому, что не спится? 
смотрите нормально работающий вариант с задисабленным инпутом: https://jsfiddle.net/hx2sor99/236/
вполне могли бы и сами «потыкать», а не дядю просить
Вопрос: Есть ли вариант, как прописать обновление этого поля – т.е. “oninput” по условию, что меняется значение поля с датой (т.е. туда вводятся или убираются какие-либо символы)
Вроде как oninput=’init(this.value)’ должно работать, но что-то не так понимаю, видимо…
Есть поле для выбора дат публикаций объявления в форме…
Если я туда вписываю вручную символы, то все работает штатно, но если делаю это с помощью доп. скрипта setDate(d) – добавляет дату через клик на календарной сетке, то значение т появляется в поле, но обновления не наступает… бо, как понимаю, не воспринимается полем как текстовое наполнение… Ну, а если привязывать к клику, то обновление суммы считается неверно, бо делается по dt.value.split(‘,’).length
понимаю, что глуп и несдержан. Но, а можно пример. Ибо я в скриптах начал неделю назад копаться.
нужно добавить формулу перерасчета суммы
я знаю что ничего не знаю, но хочу понять. Пробираюсь сквозь все это как через заклинания на древнемонгольском, потому как обезьяна с гранатой
Добавлено через 26 минут
и ещё вопросец: Benzo_gang == biper или же нет?
Я модераторам не скажу
Чтобы считать общую сумму заказа, использую умножение количества знаков*цену знака – скидка (предоставляется, если количество публикаций >3). Кстати, да … насчет вывода скидки при публикации >3-х объявлений решил.. собственно вот… Наверняка можно формулу расчета суммы можно короче как-то сформулировать и вообще более изящно, но.. работает вроде … и не оскверняйте наивной радости слишком уж, плиз..
Проблема в том, что при изменении поля даты автоматическое обновление суммы и скидки пересчитывается штатно – через событие… только если ввожу или удаляю данные непосредственно в поле «даты публикации». Если же добавляю с помощью кликов на календарной сетке, событие не срабатывает, ибо, я так понимаю, при этом не происходит добавление в поле доп. знаков текста, в том числе пресловутой запятой…
Если же привязать событие, запускающее автопересчет суммы и скидки к клику на календарной сетке, то математика считается неправильно.. – именно по клику, а не по запятой в тексте поля