Как установить текущую дату в тексте html

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

Синтаксис

дата и время текст

Атрибуты

datetime Задает дату, время или оба значения для текста. pubdate Указывает дату публикации документа.

Закрывающий тег

HTML5 IE 8 IE 9 Cr Op Sa Fx

    time time  1957-10-04 запущен первый искусственный спутник Земли.
 1960-08-19 первый полет собак в космос.
 1961-04-12 первый полет человека в космос.
 1963-06-16 первый полет женщины-космонавта.
 1969-07-21 высадка человека на Луну.

Браузеры

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

Статьи по теме

Веб-дизайн и поисковая оптимизация

В предыдущих статьях было рассмотрено создание формы обратной связи и проверка её заполнения посетителем сайта. Еще одна полезная для сайтов вещь — вставка текущей даты. Примеров скриптов даты можно найти в интернете десятки, однако многие из них, на мой взгляд, тяжеловесны и, следовательно, некрасивы. Между тем, используя стандартные средства JavaScript, вставить дату на страницу сайта можно очень просто.

Вот весь скрипт даты:

var day=new Array(«Воскресенье»,»Понедельник»,»Вторник»,
«Среда»,»Четверг»,»Пятница»,»Суббота»);

var month=new Array(«января»,»февраля»,»марта»,»апреля»,»мая»,»июня»,
«июля»,»августа»,»сентября»,»октября»,»ноября»,»декабря»);

document.write(day[d.getDay()]+» » +d.getDate()+ » » + month[d.getMonth()]
+ » » + d.getFullYear() + » г.»);
//—>

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

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

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

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

Объект Date возвращает, то есть считывает с компьютера, информацию о текущей дате. Хотя значения даты возвращаются в стандартной форме, фактическое значение хранится как количество миллисекунд, прошедших после полуночи 1 января 1970 года. Применение этого соглашения запрещает использование дат до 1970 года. (Всегда удивляюсь, как изощрённо программисты умудряются запудрить мозги нормальному человеку. Вспомните страшилки, которыми нас пугали при переходе к новому 2000 году!)

Итак, начинаем с присвоения значения даты переменной d, затем создаём массивы (Array) для дней недели (day) и месяцев (month), указывая их в необходимой грамматической форме: падеж, число, заглавная буква, если слово стоит в начале даты и т.п. Последняя строчка скрипта — собственно печать даты (document.write). Здесь вы устанавливаете, что и в какой последовательности будете выводить в строке текущей даты. Компоненты отделяются друг от друга знаком +. Для ввода пробела используется конструкция » «, а для ввода буквы г (год) — конструкция » г.»

Как видно из скрипта, получение данных о текущем времени выполняет элемент get. Этот метод позволяет получить следующую информацию:

getDate() — возвращает число от 1 до 31, представляющее число месяца;
getDay() — возвращает день недели как целое число от 0 (воскресенье) до 6 (суббота);
getMonth() — возвращает номер месяца в году;
getFullYear() — возвращает год. Если использовать просто getYear(), то будет выводиться текущий год минус 1900;
get Hours() — возвращает час суток;
getMinutes() — возвращает минуты как число от 0 до 59;
getSeconds() — возвращает число секунд от 0 до 59.

Вставлять непосредственно Java-скрипт внутрь страницы сайта не всегда удобно. Лучше поместить описание скрипта в начало страницы между тегами и задать переменную, которую будем вызывать по мере необходимости в тексте. Назовём её TODAY и определим в ней форму вывода даты аналогично вышеизложенному. Скрипт будет выглядеть следующим образом:

Для вывода даты вызываем скрипт в нужном месте HTML-кода страницы, используя следующую команду:

Если ваш сайт содержит много страниц, на которых надо показывать дату, то удобнее выделить Java-скрипт вывода даты в отдельный файл, например, data.js. Практически, это страница, состоящая из первого из описанных скриптов, то есть со строкой document.write (см. выше). Располагать её надо в том же каталоге, что и основная страница, и вызывать в месте вывода даты следующим образом:
.

Не забудьте проверить, чтобы файл data.js имел ту же кодировку, что и основной документ, иначе дата будет выводиться замечательными крючками, квадратиками и прочими финтифлюшками. Если вы используете программу Adobe Dreamweaver, то для этого надо выбрать раздел Редактировать — Установки. — Создать документ — Java Script — Кодировка по умолчанию. Также сменить кодировку скрипта можно в Microsoft Word. Для этого откройте документ, задайте нужную кодировку, если он выводится неверно (как это сделать, смотрите в «Справке Word»), а затем сохраните его следующим путем: Файл — Сохранить как — Обычный текст — Сохранить. В открывшемся окне вы можете задать необходимую кодировку.

Замечание. Следует иметь ввиду, что описанный скрипт выводит дату, установленную на компьютере пользователя, что не всегда соответствует реальному текущему времени. Если вам необходимо показать точное время, то необходимо использовать РНР-скрипт, который будет показывать время на сервере. Об этом способе вывода даты на сайте, а также о добавлении даты в письма с формы обратной связи расмотрим в следующей статье.

И последнее — для особо ленивых. Если описанный способ вставки даты покажется вам сложным, то, как говорилось в начале статьи, вы можете воспользоваться готовыми формами, предлагаемыми в интернете, например, информерами Яндекса. Для их размещения на сайте выбираете нужный раздел (пробки, время, погода или новости), понравившийся дизайн информера, задаете город и получаете код для вставки. Два вида таких информеров даты показаны на примере внизу:

of your page —>

Как раскрутить сайт (серия статей)
Создание формы обратной связи
Создание иконки для сайта
Создание выпадающего меню
Вебдизайн с jQuery — это очень просто!
Курсор как элемент веб-дизайна
Создание гостевой книги на сайте
Фон для сайта
Вывод текущей даты на сайте
Создание бегущей строки на сайте
Создание «схемы проезда» на сайте
Ключевые слова и продвижение сайта
Оптимизация и ускорение компьютера. Обзоры программ

Дата и время

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

Как и в случае с календарём пока поддержка этого поля имеется только в браузерах Opera (рис. 1) и Chrome (рис. 2). Атрибуты те же, что и для календаря.

Вид поля для выбора даты и времени в Opera

Рис. 1. Вид поля для выбора даты и времени в Opera

Рис. 2. Ввод даты и времени в Chrome

Opera предоставляет удобный виджет сочетающий календарь и ввод времени, Chrome же ограничивается только полем, в котором можно прокручивать секунды или вводить текст вручную. Данные на сервер по умолчанию пересылаются в виде ГГГГ-ММ-ДДTчч:ммZ (например: 2015-09-25T12:15Z), где вначале указывается год, месяц и день, затем после латинской буквы T идут часы с минутами. В теории вместо Z указывается часовой пояс (например: +08:00 или -04:00), а также по желанию секунды с дробной частью, но на практике всё ограничивается только минутами и без часового пояса. Более того, при их наличии Chrome выводит сообщение «Недопустимые данные» и не отправляет введённый текст.

В примере 1 показано создание поля для ввода даты и времени.

Пример 1. Дата и время

HTML5 IE 7 IE 8 IE 9 Cr 13 Op 11 Sa 5 Fx 6

    Дата и время   Время создания публикации

Разница между значениями datetime и datetime-local заключается в добавлении часового пояса для datetime . На деле же пересылаются те же самые данные, только без Z в конце (2015-09-25T12:15).

Для ввода только времени без даты применяется , это поле также работает только в Opera и Chrome.

В примере 2 показано создание поля для ввода времени в указанном диапазоне.

Пример 2. Ввод времени

HTML5 IE 7 IE 8 IE 9 Cr 13 Op 11 Sa 5 Fx 6

    Время   В какое время запускать Cron?

В данном примере значение изначально задано с помощью атрибута value , а минимальное и максимальное время установлено через min и max .

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Тег time, дата и время

В новой записи вы решили уточнить точное время дня (а точнее ночи), когда именно была сделана запись. Строку со временем можно оставить просто текстом, но есть вариант получше. В HTML есть специальный тег для разметки даты и времени. Это тег .

С помощью можно описывать даты одновременно и для человека, и для машины. Дата для человека описывается внутри тега, а дата для машины — внутри атрибута datetime в формате ISO 8601:

09:54 утра 18 ноября 2015 в прошлую субботу вчера

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

Мы добавили немного стилей, чтобы теги смотрелись красивее. Вы можете изучить стили во вкладке style.css .

Хотите начать карьеру веб-разработчика? Записывайтесь на профессию «Фронтенд-разработчик», которая стартует 12 декабря 2023. Всего от 4 130 ₽ в месяц.

Перейти к заданию

index.html Сплит-режим
style.css Сплит-режим

Сайт начинающего верстальщика

Блог

День девятый. Точнее ночь

03:00

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

«Какая прекрасная мысль», — подумал я, перевернулся на другой бок и заснул.

Как установить текущую дату в тексте html