Дата и время в HTML. Формат, текущее время, часы на сайте

Рейтинг: 4 из 5, голосов 1
++++-
Дата и время в HTML. Формат, текущее время, часы на сайте

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

Указание даты и времени для ивента (например, "концерт Alan Walker в Москве 25 февраля в 19:00") в микроразметке, обозначение точки отсчета для скриптов на странице, улучшенное понимание даты и времени указанного в контенте страницы поисковой системой (например, с помощью тега <time>) - для этих целей нужно использовать формат времени HTML.

Для человека будет достаточно написать "сегодня в 10", "через 3 дня", в "прошлом году", но для "машины" такая запись далеко не всегда будет информативной. Формат даты и времени в HTML позволяет описывать выражения подобные этим, а также указывать не только временные точки, но и временные отрезки, например "длительность 2 часа 17 минут".

Рассмотрим как правильно писать дату и время в HTML.

Формат точной даты и времени YYYY-MM-DDThh:mm:ssTZD

Этот формат используется для указания конкретной временной точки ("20-го апреля", "сегодня в 8 утра", "15 января 2001 года").

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

Расшифровка формата YYYY-MM-DDThh:mm:ssTZD:

  • YYYY - год, 4 цифры;
  • MM - месяц, 2 цифры;
  • DD - число, 2 цифры;
  • T - разделитель даты и времени, вместо "T" можно использовать пробел;
  • hh - часы, 2 цифры, используется 24-часовой формат времени;
  • mm - минуты, 2 цифры;
  • ss - секунды, 2 цифры;
  • TZD - временная зона, например: "+03:00". Формат временной зоны: +hh:mm, либо -hh:mm.

Также можно указать неделю в году в формате YYYY-WW. WW - номер недели, 2 цифры.

Рассмотрим примеры вывода даты и времени в формате временной точки.

Название Формат Пример
Дата, точное время, временная зона YYYY-MM-DDThh:mm:ssTZD 2010-05-12 22:47:11+02:00
Дата и время YYYY-MM-DDThh:mm 2015-09-23 21:13
Время с временной зоной hh:mmTZD 12:34+04:00
Дата YYYY-MM-DD 2015-09-23
Месяц и число MM-DD 01-30
Год и месяц YYYY-MM 1989-11
Год и неделя YYYY-WW 2009-46
Год YYYY 2007

Формат периода времени (длительность)

Формат PWDTHMS используется когда нужно указать не конкретную точку, а период времени: "3 дня", "2 часа 5 минут" и т.п. То есть, когда нужно показать длительность.

Длительность периода считается в секундах. Если указана другая величина, время приводится к секундам путем умножения:
2 минуты = 2*60 = 120 секунд и т.п.

Расшифровка формата PWDTHMS:

P - префикс периода;

W - суффикс для количества недель (604800 секунд);

D - суффикс для количества дней (86400 секунд);

T - префикс времени;

H - суффикс для количества часов (3600 секунд);

M - суффикс для количества минут (60 секунд);

S - суффикс для количества секунд;

Примеры указания периода времени:

"x" - любое число.

Название Формат Пример
2 недели PхW P2W
10 дней PхD P10D
4 дня 3 часа 5 минут PхDTхHхM P4DT3H5M
2 часа 37 минут PTхHхM PT2H37M
5 минут 10 секунд PTхMхS PT5M10S

Как вставить текущее время в HTML

Вывести на страницу сайта текущее время используя только лишь HTML не получится.

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

За вывод даты и времени в JavaScript отвечает объект типа Date().

Попробуем вывести текущую дату и время на экран с помощью встроенного скрипта:

<script type="text/javascript">
document.write(Date());
</script>

Результат:

Как видим, выводятся вся информация о дате и времени.

Дата и время в HTML в привычном формате

Если мы хотим вывести дату и время в более привычном формате, можем воспользоваться функциями getFullYear(), getMonth(), getDate(), getHours(), getMinutes(), getSeconds().

Поскольку функции возвращают значения месяцев, дней, часов, минут, секунд без ведущих нулей, нам понадобится написать дополнительную функцию, которая будет эти нули добавлять.

Вставить текущее время и дату в HTML в привычном формате можно с помощью следующего кода:

<div id="current_date_time_block"></div>

<script type="text/javascript">

/* функция добавления ведущих нулей */
/* (если число меньше десяти, перед числом добавляем ноль) */
function zero_first_format(value)
{
if (value < 10)
{
value='0'+value;
}
return value;
}

/* функция получения текущей даты и времени */
function date_time()
{
var current_datetime = new Date();
var day = zero_first_format(current_datetime.getDate());
var month = zero_first_format(current_datetime.getMonth());
var year = current_datetime.getFullYear();
var hours = zero_first_format(current_datetime.getHours());
var minutes = zero_first_format(current_datetime.getMinutes());
var seconds = zero_first_format(current_datetime.getSeconds());

return day+"."+month+"."+year+" "+hours+":"+minutes+":"+seconds;
}

/* выводим текущую дату и время на сайт в блок с id "current_date_time_block" */
document.getElementById('current_date_time_block').innerHTML = date_time();
</script>

Результат:

Таким образом у нас получилось вывести на страницу сайта точное время на момент открытия страницы.

Часы на сайт, обновляемые в реальном времени

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

<div id="current_date_time_block2"></div>

<script type="text/javascript">

/* каждую секунду получаем текущую дату и время */
/* и вставляем значение в блок с id "current_date_time_block2" */
setInterval(function () {
document.getElementById('current_date_time_block2').innerHTML = date_time();
}, 1000);
</script>

Результат:

Изменить формат даты и времени, выводимый в HTML код страницы, вы можете, комбинируя функции объекта Date(). Все они описаны в справочнике по JavaScript.

Оцените, насколько полезна эта страница
++++-
Оставьте комментарий

Отправляя форму, я даю согласие на обработку персональных данных.