Как изменить время на сайте через код страницы

Элемент &lttime&gt представляет собой дату, время или период времени, представленные в машинночитаемом формате. Он может быть полезен для создания расписаний, архивов или других функций, связанных со временем. WordPress использует этот элемент в базовой теме оформления. Ещё один пример использования &lttime&gt — Reddit:

Краткая история

Жизненный путь этого элемента был нелёгким. Его добавили в спецификацию HTML5 в 2009 году. Два года спустя, в 2011, его убрали и заменили на гораздо более широкий &ltdata&gt. Однако в этом же году его вернули и добавили новых возможностей. Сейчас его можно уверенно использовать.

Ситуацию хорошо описал Брюс Лоусон (убрали, вернули, текущее положение дел). [Та же история на Хабре: убрали, вернули]. Классический пример того, как реакция сообщества разработчиков влияет на развитие HTML.

Тэг и атрибут

&lttime&gt можно использовать как обычный тег HTML. Вот простой пример, который представляет ноябрь 2011:

<time>2011-11</time>

В этом примере текст внутри тега является валидным значением атрибута datetime (о котором подробнее пойдёт речь дальше). Однако это совершенно необязательно. Это значение можно переместить в атрибут, указанный явно, а внутри тега использовать произвольный текст:

<time datetime="2011-11">A cold winter month many years ago</time>

Именно атрибут datetime придаёт этому элементу его уникальные свойства. Он представляет в машинночитаемом виде любую дату, вермя или интервал, относящийся к тексту внутри тега. Так как он предназначен для компьютеров, его формат жестко определён.

В большинстве случаев текст, заключенный в тег, представляет то же самое время в удобочитаемом виде:

<time datetime="2011-11">November, 2011</time>

10 способов указания времени

Существует множество разновидностей форматирования datetime.

Год и месяц

2014-06

Очень просто: год идёт перед месяцем.

Дата

1969-07-16

Год, затем месяц, затем день.

Дата без года

12-31

Месяц, затем день.

Только время

14:54:39.929

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

Дата и время

2013-11-20T14:54

Комбинация даты и времени, разделённых заглавной «T». Букву «T» можно заменить на пробел.

Часовой пояс

+06:00

Начинается с плюса или минуса. Двоеточие необязательно. Всемирное координированное время (UTC, +00:00) можно заменить заглавной «Z».

Местная дата и время

2019-12-31T23:59:59-02:00

Дата и время с указанием часового пояса, вместо «T» можно использовать пробел.

Год и неделя

2010-W21

Год, затем заглавная «W» и номер недели.

Только год

1776

Должно быть четыре или больше цифр. Примеры корректных значений: "0001", "12345".

Временной интервал (первый способ)

P2DT2H30M10.501S

«P», затем опционально — количество дней, «T», затем опционально — количество часов, минут и секунд. Все буквы только в верхнем регистре.

Временной интервал (второй способ)

1w 2d 2h 30m 10.501s

Недели, дни, минуты, секунды. Буквы могут быть в любом регистре, пробелы необязательны.

Примеры

Google released Gmail Blue on <time datetime="2013-04-01">April 1st, 2013</time>.

The Chelyabinsk meteor entered Earth's atmosphere over Russia on <time datetime="2013-02-15T09:20+06:00">15 February 2013 at about 09:20 YEKT (03:20 UTC)</time>.

The Apollo 13 mission lasted a total of <time datetime="5d 22h 54m 41s">5 days, 22 hours, 54 minutes, and 41 seconds</time>.

Проблемы с форматирование datetime?

Эта небольшая форма на CodePen поможет преобразовать значения даты и времени в корректный тег &lttime&gt:

Поддержка в брузерах

У элемента &lttime&gt нет проблем с поддержкой в браузерах. Если браузер знаком с элементом, он его обработает, если нет — воспримет его, как неизвестный inline-элемент, что нас вполне устраивает. Так же легко доступен и атрибут datetime.

Есть ещё DOM-интерфейс связанный с элементом &lttime&gt. Через ссылку на элемент можно получить значение dateTime:

<p>The concert took place on <time datetime="2001-05-15 19:00">May 15</time>.</p>
<script>
  var time = document.getElementsByTagName("time")[0];
  console.log(time.dateTime);
  // outputs "2001-05-15 19:00"
</script>

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

В чём преимущества использования &lttime&gt?

Здесь я процитирую Брюса Лоусона, так как, пожалуй, лучше и не скажешь:

Варианты использования однозначного указания даты придумать нетрудно. Браузер может предложить пользователю добавить событие на странице в его календарь. Браузер в Таиланде может автоматически преобразовать дату в григорианском календаре в традиционный буддийский. Японский браузер может показать &lttime&gt16:00&lt/time&gt как «16:00時». Агрегаторы контента могут автоматически генерировать временную шкалу событий.

Поисковики могут улучшать результаты выдачи. Например, недавно был сильный снегопад, я погуглил и обнаружил, что школа, в которую ходят мои дети, сегодня закрыта. Только когда из школы позвонили и спросили, почему мои дети не пришли, я обнаружил, что внизу страницы с новостью о закрытии школы написано мелким шрифтом: «Опубликовано 5 января 2008». Поисковики вполне могли бы располагать недавние события выше в выдаче.

Ещё одна полезная мелочь

Вы можете ещё немного улучшить элемент &lttime&gt, если добавите атрибут title, в котором укажете более детальную информацию. То есть данные о времени можно представлять сразу в трёх видах:

• В удобном для чтения виде внутри тега;
• В более подробном виде во всплывающей подсказке;
• В машинночитаемом формате.

Этот приём используется на сайте CodePen:

А вот пример кода для Rails, который выводит время в этих трёх видах:

<time 
  datetime="<%= @pen.created_at.strftime("%Y-%m-%dT%H:%M") %>"
  title="<%= @pen.created_at.strftime("%Y-%m-%d at %I:%M %p") %>">
    <%= @pen.created_at.strftime("%B %d, %Y") %>
</time>

Приветствую Вас, дорогой товарищ! Продолжаем осваивать возможности веб-технологий и попробуем сейчас добавить дату и время на сайт. Сделать это можно несколькими способами. Мы рассмотрим два. Один с использованием PHP, а второй на JavaScript. Давайте начнем с первого. По традиции предлагаю посмотреть на пример.

Демо

Итак, для того, чтобы добавить дату и время на сайт в PHP, достаточно написать стандартную функцию, которая как раз и вызывает то, что нам нужно и у нее есть параметры, с которыми сейчас будем разбираться.

PHP

1
2

$date = date('d.m.Y H:i');
echo $date; // 28.09.2019 02:29

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

1
2

$date = 'Сегодня ' . date('d F Y l') . '. Время: ' . date('H:i');
echo $date; // Сегодня 28 September 2019 Saturday. Время: 02:33

Дата и время выводится, но как вы уже заметили, то не совсем так, как нам нужно. Желательно, чтобы название месяца и день недели был на русском. Это небольшой нюанс или даже особенность самого языка. Но решить это можно довольно-таки легко. Мы создадим 2 массива с кириллическими названиями дней и месяцев и тогда все должно работать нормально.

1
2
3
4
5
6
7
8
9
10
11

$days = array(
 'Воскресенье', 'Понедельник', 'Вторник', 'Среда',
 'Четверг', 'Пятница', 'Суббота',
);
$month = array(
  'Января', 'Февраля', 'Марта', 'Апреля',
  'Мая', 'Июня', 'Июля', 'Августа',
  'Сентября', 'Октября', 'Ноября', 'Декабря',
);
$date = 'Сегодня ' . date('d') . ' ' . $month[(date('n') - 1)] . ' ' . date('Y') . ' года. ' . $days[(date('w'))] . '. Время: ' . date('H:i');
echo $date // Сегодня 28 Сентября 2019 года. Суббота. Время: 02:45

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

Добавить дату и время на сайт на JavaScript

И давайте сразу добавим корректные русские названия, чтобы все легко читалось. У функции вывода даты и времени в JS много разных параметров, я покажу наиболее часто используемые.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

var data = new Date();
var month=new Array(12);
  month[0]="Января";
  month[1]="Февраля";
  month[2]="Марта";
  month[3]="Апреля";
  month[4]="Мая";
  month[5]="Июня";
  month[6]="Июля";
  month[7]="Августа";
  month[8]="Сентября";
  month[9]="Октября";
  month[11]="Декабря";
var weekday=new Array(7);
  weekday[0]="Воскресенье";
  weekday[1]="Понедельник";
  weekday[2]="Вторник";
  weekday[3]="Среда";
  weekday[4]="Четверг";
  weekday[5]="Пятница";
  weekday[6]="Суббота";
document.write (data.toLocaleString()); // 28.09.2019, 02:50:33
document.write(data.toString()); // Дата: Sat Sep 28 2019 02:50:38 GMT+0300 (Москва, стандартное время)
document.write(data.getDate()+ ' ' + month[data.getMonth()]+ ' ' +data.getFullYear()+' года. '+weekday[data.getDay()]+'. Время: '+data.toLocaleTimeString()); // 28 Сентября 2019 года. Суббота. Время: 02:50:45
document.write('Сегодня ' +data.getDate()+ ' ' + month[data.getMonth()]+ ' ' +data.getFullYear()+' года. '+weekday[data.getDay()]+'. Время: '+data.getHours()+ ':'+data.getMinutes()); // Сегодня 28 Сентября 2019 года. Суббота. Время: 02:54

На демо странице первый и последний пример сделаны идентично, но следует отметить одну немаловажную деталь. Время в PHP и время в JS может отличаться. Все дело в том, что ПХП берет время с сервера, а JavaScript с вашего устройства, отсюда и разница. Оно может отличаться на несколько часов, в зависимости от часового пояса. Поэтому, если вам нужно вывести дату и время на сайте для пользователя, то лучше использовать JS. А счетчики посещений на серверных языках.

Идущие часы на сайт

И напоследок приведу небольшую JavaScript функцию, которая позволит вам добавить на сайт живые часы, которые будут отсчитывать время. Как на странице с примерами.

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<script type="text/javascript">
function startTime()
{
var tm=new Date();
var h=tm.getHours();
var m=tm.getMinutes();
var s=tm.getSeconds();
m=checkTime(m);
s=checkTime(s);
document.getElementById('timer').innerHTML=h+":"+m+":"+s;
t=setTimeout('startTime()',500);
}
function checkTime(i)
{
if (i < 10)
{
i="0" + i;
}
return i;
}
</script>
</script>

HTML

1
2
3

<body onload="startTime()">
<div id="timer"></div>
</body>