Как сделать дату на сайте: HTML, JavaScript и часовой пояс

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

Сначала выберите, какую дату должен видеть человек

Одинаковая надпись «дата на сайте» может означать разные данные. До правки кода запишите одним предложением, что должно меняться и для кого. Это защищает от типичной ошибки, когда дата публикации внезапно становится сегодняшней при каждом открытии страницы.

• Постоянная дата подходит для статьи, документа, новости и события с уже известным днём.
• Дата на устройстве посетителя подходит для нейтральной подписи «Сегодня», если небольшое расхождение не влияет на решение.
• Единая серверная дата нужна для окончания акции, бронирования, платежа, журнала действий и любых правил, которые нельзя доверять часам телефона.
• Если дата вводится человеком, используйте поле формы, а не автоматическую подстановку текущего дня.

Правило выбора простое: чем дороже ошибка во времени, тем дальше источник даты должен быть от браузера посетителя. Для подписи достаточно HTML, для дедлайна нужен сервер.

Как поставить фиксированную дату в HTML

Для постоянной даты используйте элемент time. Внутри оставьте понятную человеку запись, а в атрибуте datetime укажите машиночитаемое значение. Стандарт HTML прямо определяет time как элемент для даты или времени и требует корректное значение datetime, если атрибут присутствует: спецификация WHATWG.

<p>Опубликовано <time datetime="2026-08-24">24 августа 2026 года</time></p>

Такой фрагмент не меняется сам. Он подходит для статической страницы, в том числе собранной по инструкции про сайт на HTML. Если редактор сайта уже хранит дату публикации, берите значение из редактора, а не добавляйте второй независимый источник вручную.

Как показать текущую дату через JavaScript

Для даты на устройстве создайте пустой time, затем заполните его после загрузки страницы. Intl.DateTimeFormat форматирует дату с учётом языка и выбранного часового пояса; параметры и примеры описаны в справке MDN.

<p>Сегодня: <time id="today">дата загружается</time></p>
<script>
  const node = document.getElementById('today');
  const now = new Date();
  node.dateTime = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
  node.textContent = new Intl.DateTimeFormat('ru-RU', {
    day: 'numeric',
    month: 'long',
    year: 'numeric'
  }).format(now);
</script>

Текст «дата загружается» служит безопасным запасным вариантом: страница не останется с пустой строкой, если JavaScript заблокирован. Если вы только осваиваете скрипты, сначала полезно понять, где JavaScript действительно нужен сайту, а затем вставлять код в готовую страницу.

По теме: Как сделать CMS-сайт: пошаговый план в 2026 году

Как задать один часовой пояс для всех

По умолчанию браузер берёт часы устройства. Посетители из разных городов могут увидеть разные дни около полуночи. Если информационная страница должна жить по московскому времени, явно добавьте timeZone: 'Europe/Moscow' при форматировании. Метод toISOString() всегда возвращает время UTC, что подтверждает справка MDN, поэтому для атрибута datetime лучше собрать части в том же часовом поясе или получить готовую дату с сервера.

const format = new Intl.DateTimeFormat('ru-RU', {
  day: 'numeric', month: 'long', year: 'numeric',
  timeZone: 'Europe/Moscow'
});
node.textContent = format.format(new Date());

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

Порядок установки на готовую страницу

Рабочий путь не зависит от редактора сайта. В конструкторе код вставляют в HTML-блок, в файле страницы редактируют разметку напрямую, а в CMS меняют шаблон или компонент. Сохраните копию исходного блока перед изменением.

1. Определите тип даты: постоянная, дата устройства или единая серверная.
2. Добавьте элемент time в нужное место и оставьте понятный запасной текст.
3. Для динамического варианта вставьте скрипт после элемента либо запускайте его после загрузки документа.
4. Выберите язык ru-RU и, если нужен единый день, зафиксируйте часовой пояс.
5. Опубликуйте тестовую страницу и откройте её без авторизации в отдельном окне.
6. После проверки перенесите тот же блок на рабочую страницу.

Если страница собрана в одном файле, порядок особенно легко проверить на примере сайта в Блокноте: сначала разметка, ниже скрипт, затем публикация. Не вставляйте один и тот же скрипт одновременно в шаблон и в блок страницы.

По теме: Как сделать сайт на роутере: локально и без риска

Проверяемый чек-лист

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

• Дата видна при обычной загрузке и после обновления страницы.
• Месяц написан по-русски, порядок дня и месяца не перепутан.
• У элемента time есть корректный datetime для постоянной даты.
• На телефоне строка не выходит за край блока.
• При отключённом JavaScript остаётся понятный запасной текст.
• Смена часового пояса устройства даёт ожидаемый результат или не влияет на серверный дедлайн.
• В исходном коде страницы нет второго скрипта, который перезаписывает тот же элемент.

Диагностика частых сбоев

Вместо даты пустое место. Проверьте совпадение id в HTML и в getElementById. Затем откройте консоль браузера: ошибка до вашего фрагмента может остановить выполнение всего скрипта.

Показывается вчерашний или завтрашний день. Сравните часовой пояс устройства, заданный timeZone и источник значения. Не смешивайте UTC из toISOString() с локальным текстом без явного преобразования.

Дата появляется только после обновления. Скрипт, вероятно, запускается раньше элемента или редактор переносит его в верх страницы. Поставьте скрипт после разметки либо дождитесь события загрузки документа.

На всех страницах одна дата публикации. Значение зашито в общий шаблон. Передавайте дату записи из CMS или храните её в данных каждой страницы, не вычисляйте как текущую.

По теме: Как изменить курсор на сайте: CSS, картинка и проверка

Когда этот способ не подходит

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

Частые вопросы

Как вывести только год на сайте?

Для постоянного года напишите его в time. Для автоматически обновляемого подвала получите new Date().getFullYear() и вставьте число в отдельный элемент.

Можно ли показать дату без JavaScript?

Да, если дата известна заранее или её подставляет CMS либо сервер. Обычный HTML сам не вычисляет сегодняшний день.

Почему месяц начинается не с того числа?

Метод getMonth() нумерует месяцы с нуля, это указано в справке MDN. Intl.DateTimeFormat снимает эту задачу и сразу даёт локализованное название.

Как сделать часы, которые обновляются каждую секунду?

Используйте таймер и обновляйте только текст одного элемента. Для дедлайна всё равно сверяйте окончание на сервере, иначе изменение часов устройства обойдёт ограничение.