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

Рейтинг: 4 из 5, голосов 26
++++-
Дата и время в 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().

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

Также обратите внимание на то, что функция getMonth() возвращает значение от 0 до 11 (количество полных месяцев, прошедших от начала года до указанной даты), а не порядковый номер месяца от 1 до 12. Поэтому, чтобы получить календарный номер месяца нужно к результату функции прибавить единицу.

Вставить текущее время и дату в 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()+1);
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.

Оцените, насколько полезна эта страница
++++-
Комментарии
14 декабря 2019 г.
Денис
Привет. На сайте показывается дата на месяц назад.
вместо 12 (декабрь) показывает 11 (ноябрь)
Ответить
14 декабря 2019 г.
Lebedev
Денис, спасибо за внимательность! Действительно в примере показывало на единицу меньше, исправил.
Ответить
14 декабря 2019 г.
Андрей

Здравствуйте. 
Где-то копировал сценарий такой-же небольшой, подобный(!) этому (ниже)
_______________________________________ 
<body><center><div id="timedisplay"></div>
<p>Время вашего пк</p><script language="JavaScript">
<!--<br />
function fulltime () {
var time=new Date();
document.clock.full. value=time.toLocaleString();
setTimeout('fulltime()',500)
}
-->
</script><form name="clock"><input size="24" name="full"></form><script language="JavaScript">
fulltime ();
</script></center></body>
_______________________________________ 
Но была в нём строчка с чьим-то доменом, в которую вставлял поочерёдно time.windows.com , time.nist.gov , timeserver.ru. На странице браузера сразу 2 скрипта работали - который здесь и (мировой, а не клиентский) тот, что "обронил" случайно из несохранённого блокнота. В двух строках секунды с разным интервалом в зависимости от подставленного ntp, а при ручной корректировке времени пк изменение отображалось только в той строке, скрипт которой выше.
Может кто поможет - выложит сюда примерно то, что потерял, и не получается опять найти? :)

Ответить
14 декабря 2019 г.
Lebedev
Андрей, а что именно вы хотите реализовать?
Если вы "не доверяете" клиентскому времени, то, в большинстве случаев, можно использовать как основу время сервера, где расположен ваш сайт. В этом случае не нужно будет обращаться к сторонним сервисам.
Ответить
15 декабря 2019 г.
Андрей
Не реализовать, а отыскать уже реализованный сценарий.
В котором время берётся не с сервера, где он в страницу вписан, тем паче не с клиента. А напрямую с вписанного url сервера времени.
Тестировал страницу на своём "клиентском", разница с локальными часами величины расхождения в синхронизации на каждом из 3х серверов (time.windows.com , time.nist.gov , timeserver.ru) была заметна.
Дело не в "доверяете-или-нет", а в том, что не абсолютно все клиентские пк настроемы на автосинхронизацию.
Ответить
30 июня 2020 г.
Кирилл
Если честно ничего не понял, покопипастил, понял что это не совсем то что я ищу.Я знаю относительно нормально CSS, HTML .. В JS ничего не понимаю, но ситуция такая, нужно время которое не ориентируется на время моего компьютера, сервера или еще чего. Которое я смогу один раз сам настроить и оно будет идти своим 24м поясом, плюс ко всему нужно что-то вроде оповещений спустя определенное время.Oни повторяются каждые 24 часа. Вопрос такой можно ли подобную схему реализовать через JS ?
Ответить
08 июля 2020 г.
Lebedev
Кирилл, если я правильно вас понял, вы хотите сделать настраиваемые через JS скрипт часы.

По вашему описанию не совсем понятно как вы планируете пользоваться этим скриптом, но, в любом случае, один из вариантов как можно реализовать часы со "своим" временем - это взять как базу отсчета времени время сервера или время своего компьютера и прибавлять к нему то количество секунд, минут, часов, на которое отличается ваше желаемое время.

Например, вы знаете, что время компьютера 08:40, вам нужно, 09:52. Значит нужно прибавить к времени компьютера 1 час 12 минут (либо 72 минуты).

Установка компонентов времени осуществляется с помощью специальных функций:
setHours(количество часов) - установка значения часов;
setMinutes(количество минут) - установка значения минут;
setSeconds(количество секунд) - установка значения секунд.

Не буду копировать весь код, приведу только изменения:
В функции date_time() из примера со статьи после строки
var current_datetime = new Date();
нужно добавить:
current_datetime.setMinutes(current_datetime.getMinutes() + 12);
current_datetime.setHours(current_datetime.getHours() + 1);

Таким образом, каждый раз при обращении к функции date_time() будет выводиться время, скорректированное на указанное вами количество часов и минут (1 час и 12 минут в примере выше).

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

Что касается уведомлений - это также можно реализовать через JS. Информация по формированию уведомлений есть в JS справочниках.
Ответить
01 июля 2020 г.
Алекс
Привет. Интересует тот момент, где фиксируется время захода на сайт (и потом НЕ обновляется). Если нужно в чате фиксировать время на каждое сообщение, как это сделать? То есть чтобы время фиксировалось не на момент загрузки страницы, а на момент появления сообщения в чате. Возможно?
Ответить
08 июля 2020 г.
Lebedev
Алекс, да, возможно.

При создании экземпляра Date() в нем содержится время на момент его создания.

Все, что вам нужно сделать - это создать и сохранить экземпляр Date() в момент появления сообщения:

var message_datetime = new Date();

Добавьте эту строку в функцию вывода нового сообщения и тогда для каждого сообщения будет фиксироваться время появления этого сообщения. Только не забудьте описать вывод message_datetime в нужном вам месте.
Ответить
26 июля 2020 г.
Алекс
Благодарю за инфо. Но вообще я полный профан в этом деле и иду по пути наименьшего сопротивления. ) У меня как бы чат-бот, если можно так сказать, а не реальное общение.
Для появления сообщения служит простейший скрипт:

<script> setTimeout (function(){$('.txt1') .fadeIn('fast')} ,5000); </script>

Соответственно на странице сообщения размещается:
<span class="txt1" style="display: none;"> сообщение </span>

Можно к этому как-то пришить вышесказанное?
Если долго объяснять и это очень муторно для вас, то можно оставить без ответа. )
Ответить
26 июля 2020 г.
Lebedev
Конечно можно. Вы правда не указали куда хотите выводить дату, поэтому сделал вывод после текста сообщения строкой ниже.
Замените ваш скрипт следующим:

<script>
  function date_time()
  {
    var current_datetime = new Date();
    return current_datetime.getDate() + "." + (current_datetime.getMonth()+1) + "." + current_datetime.getFullYear() + " " + current_datetime.getHours() + ":"+current_datetime.getMinutes() + ":"+current_datetime.getSeconds();
  }
  setTimeout(function() {
    $('.txt1').append("<br />"+date_time());
    $('.txt1').fadeIn('fast');
  }, 5000);
</script>
Ответить
26 июля 2020 г.
Алекс
А если несколько сообщений, то будет выглядеть так?

<script>
  function date_time()
  {
    var current_datetime = new Date();
    return current_datetime.getDate() + "." + (current_datetime.getMonth()+1) + "." + current_datetime.getFullYear() + " " + current_datetime.getHours() + ":"+current_datetime.getMinutes() + ":"+current_datetime.getSeconds();
  }
  setTimeout(function() {
    $('.txt1').append("<br />"+date_time());
    $('.txt1').fadeIn('fast');
  }, 5000);
  setTimeout(function() {
    $('.txt2').append("<br />"+date_time());
    $('.txt2').fadeIn('fast');
  }, 6000);
  setTimeout(function() {
    $('.txt3').append("<br />"+date_time());
    $('.txt3').fadeIn('fast');
  }, 7000);
</script>
26 июля 2020 г.
Lebedev
Да, похоже что так. Но, чего спрашиваете, тестируйте! :-)
26 июля 2020 г.
Алекс
Понял, спасибо огромное!
Ответить
27 июля 2020 г.
Вадим
Здравствуйте! Всё сработало кроме кода для показа реального времени... Подскажите что надо сделать
Ответить
28 июля 2020 г.
Lebedev
Добрый день. Весь приведенный код рабочий. Вы можете протестировать его, например, через "редактор кода онлайн" на этом сайте.

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

Если делаете часы реального времени, не забудьте, помимо основного блока кода, скопировать функцию date_time и zero_first_format из блока выше, либо полностью вышестоящий блок.
Ответить
28 июля 2020 г.
Вадим
спасибо большое
Ответить
20 января
Кира
Пожалуйста если не сложно. Дайте готовый код полный чтобы в реальном времени только выходило. У меня не получается. Выходят оба варианта.

помогите девушке.
Ответить
20 января
Lebedev
По вашей просьбе сделал отдельную страницу с примером часов реального времени в редакторе кода.
Ссылка на пример
Ответить
09 ноября 2020 г.
Alex
Спасибо большое!
Ответить
03 февраля
Алина
Всем привет!
Спасибо, отличная статья!
А если перед мной стоит задача вывести в блок цифру обозначающую разницу между 2011 годом и 2021.Тоесть чтобы в 2021 выводилась цифра 10, но если пользователь зайдёт уже 2022 то цифра изменилась на 11 в моем спане. Я так понимаю необходимо сделать счётчик? Помогите пожалуйста
Ответить
03 февраля
Lebedev
Зачем же усложнять. 2011 - это число. Функция getFullYear() также вернет вам число. Просто отнимаем одно от другого и получаем разницу:

<span id="year_minus_year"></span>
<script type="text/javascript">
  var current_datetime = new Date();
  var result = current_datetime.getFullYear() - 2011;
  document.getElementById('year_minus_year').innerHTML = result;
</script>
Ответить
14 марта
Стасян
как правильно указать через этот тег период времени - как график работы: с 6:00 АМ до 10:00 РМ и дни недели Понедельник-Суббота??
<time datetime='06:00 - 22:00'>06:00 AM - 10:00 PM</time>
так?????????
Ответить
14 марта
Lebedev
С помощью одного тега <time> вы можете указать одну временную точку (например, 14 марта 2021 года, 14:00) или один период времени (например, 4 дня 2 часа 45 минут 10 секунд). График работы включает в себя две временные точки, соответственно, на каждую из них используйте отдельный тег time.
Ответить
15 марта
Стасян
Это 2 тега тайм и + их надо будет чем-то обворачивать и раздвигать в одной строке? Проще конечно через <p>
Ответить
15 марта
Lebedev
Тег <time> используется для того, чтобы роботы лучше понимали контент страницы. Если же это не является вашей целью, то можете использовать любые другие удобные вам способы. Пользователей, конечно же, мало интересует через какой тег вы выводите график работы.
Ответить
25 марта
Дмитрий
Вопрос перенесен в раздел "Вопросы по веб-разработке".
Ответить
11 апреля
Cаша
Как сделать чтобы всем показывалось серверное время, а не время у клиента?
Ответить
13 апреля
Lebedev
Для того чтобы вывести серверное время, нужно, собственно, получить его у сервера. Как это реализовать зависит от типа сервера, который вы используете. Для php, например, можно использовать функцию time() для получения текущей метки системного времени Unix и функцию date() для форматирования полученного значения:
echo('<div>'.date("H:i:s", time()).'</div>'); - этот код выведет блок с текущим серверным временем в формате <часы>:<минуты>:<секунды>.
Ответить
27 апреля
CBETA
Подскажите как сделать так, чтоб дата и время были в описанном выше формате ДД-ММ-ГГГГ ЧЧ-ММ-ММ. При нажатии кнопки время фиксировалось и оставалось таким как было при клике на кнопку?
Ответить
27 апреля
Lebedev
Для того, чтобы отображать время в момент нажатия на кнопку, нужно привязать вывод текущего времени в блок к событию нажатия кнопки, например, так (разместите после кода из контента статьи):

<button id="get_current_time">Вывести текущее время</button>
<script type="text/javascript">
   document.getElementById('get_current_time').addEventListener( 'click', function() {
     document.getElementById('current_date_time_block').innerHTML = date_time();
  });
</script>
Ответить
28 апреля
CBETA
Разобралась! Спасибо
Ответить
07 мая
Юрий
Добрый день!
Подскажите пожалуйста, у меня есть поле даты заполняемое руками пользователем.
input class="text medium-field" id="duedate" name="duedate" type="text" value=" YYYY-MM-DD"
как передать date_time(); в это поле?
используя пример выше?
спасибо большое
Ответить
08 мая
Lebedev
Юрий, если хотите реализовать это именно так, как вы написали, то:
document.getElementById('duedate').value = date_time();
Ответить
11 мая
Юрий
А есть еще варианты ? Буду благодарен за подсказку
данный параметр передается через POST запрос.
Ответить
14 мая
Lebedev
Юрий, чтобы понять какой метод вам подойдет, нужно подробное описание того, что вы пытаетесь реализовать. Может быть вам и не нужно иcпользовать JavaScript вообще и будет достаточно заполнить поле с помощью php функции date() при формировании страницы с формой.

Если есть желание, можете описать свою ситуацию подробно в разделе "Ответы на Ваши вопросы".
Ответить
14 июля
Александр
Подскажите, на сайте нужно сделать, чтобы в тексте менялась дата. Например

Мы стартуем 12 июля 2021

Приходит время на 12 июля и дата меняется на 19 июля 2021. И так постоянно?
Ответить
22 июля
Lebedev
Александр, вы не описали алгоритм по которому хотите чтобы менялась дата. Могу предположить, что вы хотите чтобы дата сдвигалась каждый раз на неделю. В этом случае можно реализовать вывод даты следующего необходимого дня недели на серверном языке. Приведу пример с php:

echo date('d.m.Y', strtotime('next Monday', time()));

Приведенный код выведет дату ближайшего понедельника в формате 19.07.2021. Если вы хотите выводить название месяца на русском, то один из вариантов - использовать функцию date() отдельно для генерации номера дня, месяца и года. При этом, нужно будет заменить номер месяца на его название (например, использовать массив с названиями месяцев на русском, подставляя элемент массива с порядковым номером нужного месяца).
Ответить
28 июля
Александр
Есть готовый код но в комментарий не влазит
Ответить
02 ноября
Олег
Спасибо! А можете ли подсказать как выглядел бы этот скрипт, если его вынести в отдельный js файл?
Ответить
26 ноября, пятница
Lebedev
Олег, вы можете использовать приведенный в примерах JavaScript код в подключенных .js файлах. Никаких изменений при этом вносить не нужно.
Ответить
Оставьте комментарий

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