Меню Рубрики

Установка даты в html

Дата на сайте HTML

Еще одна полезная для сайтов вещь — вставка текущей даты. Примеров скриптов даты можно найти в интернете десятки, однако многие из них, на мой взгляд, тяжеловесны и, следовательно, некрасивы. Между тем, используя стандартные средства JavaScript, вставить дату на страницу сайта можно очень просто. Я его очень часто применяю! На картинке (скриншот с действующего сайта) усадьбы «Сказка»!

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

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

Еще один вариант более расширенный

Вобщем не требуется никаких навыков, просто тупо вставляем код и все ок!

Подробнее:

Итак, начинаем с присвоения значения даты переменной 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 имел ту же кодировку, что и основной документ, иначе дата будет выводиться замечательными крючками, квадратиками и прочими финтифлюшками.

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

источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Название Формат Пример
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() .

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

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

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

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

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

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

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

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

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

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

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

источник

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

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

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

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

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

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

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

$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 много разных параметров, я покажу наиболее часто используемые.

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 функцию, которая позволит вам добавить на сайт живые часы, которые будут отсчитывать время. Как на странице с примерами.

источник

Установка даты в html

Элементы используется для создания интерактивных элементов управления в веб-формах для принятия данных от пользователя; в зависимости от устройства и user agent, доступен широкий выбор типов входных данных и виджетов управления.»> типа date создают поля ввода и позволяют пользователю ввести дату, либо использовать text box для автоматической проверки контента или использовать специальный интерфейс date picker. Возвращаемое значение включает год, месяц, день, но не время. Используйте поля ввода time или datetime-local , чтобы вводить время или дату/время соответственно.

Отображение date различается в зависимости от браузера, кроме того не все браузеры поддерживают date . Подробнее см. Browser compatibility. В неподдерживаемых браузерах элемент будет отображаться как обычный .

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на внесение изменений.

Среди браузеров которые поддерживают кастомный интерфейс для выбора даты в Chrome/Opera выглядит как:

Value Возвращает DOMString , с датой в формате гггг-мм-дд, или пустую строку
События change и input
Поддерживаемые атрибуты autocomplete , list , readonly , and step
IDL attributes list , value , valueAsDate , valueAsNumber .
Методы select() , stepDown() , stepUp()

Значение

Возвращает DOMString представляющий значение даты введенной в input. Вы можете установить значение по умолчанию для элемента с помощью добавления атрибута в value , например:

Помните что отображаемый формат даты отличается от настоящего значения value — отображаемый формат даты будет выбран базируясь на расположении браузера пользователя, тогда как значение это всегда отформатированный гггг-мм-дд.

Вы также можете получить или установить значение даты в JavaScript используя свойство ввода элемента value , к примеру:

Дополнительные атрибуты

Атрибут Описание
max Максимально возможная дата для установки
min Минимально возможная дата для установки
step Шаг (в днях), с которым будет изменяться дата при нажатии кнопок вниз или вверх данного элемента

Максимально возможная дата для установки. Если value является более поздней датой, чем дата, указанная в атрибуте max , элемент отобразит ошибку при помощи constraint validation. Если в атрибуте max указано значение, не удовлетворяющее формату yyyy-MM-dd , значит элемент не будет иметь максимальной даты.

В атрибуте max должна быть указана строка с датой, которая больше или равна дате, указанной в атрибуте min .

Минимально возможная дата для установки. Если value является более ранней датой, чем дата, указанная в атрибуте min , элемент отобразит ошибку при помощи constraint validation. Если в атрибуте min указано значение, не удовлетворяющее формату yyyy-MM-dd , значит элемент не будет иметь минимальной даты.

В атрибуте min должна быть указана строка с датой, которая меньше или равна дате, указанной в атрибуте max .

The step attribute is a number that specifies the granularity that the value must adhere to, or the special value any , which is described below. Only values which are equal to the basis for stepping ( min if specified, value otherwise, and an appropriate default value if neither of those is provided) are valid.

A string value of any means that no stepping is implied, and any value is allowed (barring other constraints, such as min and max ).

Note: When the data entered by the user doesn’t adhere to the stepping configuration, the user agent may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options.

For date inputs, the value of step is given in days, with a scaling factor of 86,400,000 (since the underlying numeric value is in milliseconds). The default value of step is 1, indicating 1 day.

Specifying any as a value for the step attribute makes the same effect as it were equal to 1 for date inputs.

Использование полей ввода c типом date

На первый взгляд, элемент выглядит заманчиво — он предоставляет легкий графический интерфейс для выбора даты, нормализует формат даты, отправляемой на сервер независимо от локальных настроек пользователя. Тем не менее, есть проблемы с в связи с ограниченой поддержкой браузеров.

We’ll look at basic and more complex uses of , then offer advice on mitigating the browser support issue later on (see Handling browser support). Of course, hopefully over time browser support will become more ubiquitous, and this problem will fade away.

Как использовать date?

Самый простой способ использовать — это использовать его с элементами и label , как показано ниже:

Setting maximum and minimum dates

Вы можете использовать атрибуты min и max , чтобы ограничить дату, которую может выбрать пользователь. В следующем примере мы устанавливаем минимальную дату 2017-04-01 и максимальную дату 2017-04-30 . Пользователь сможет выбрать дату только из этого диапазона:

В результате выполнения кода, пользователь сможет выбрать любой день апреля 2017 года, но не сможет выбрать и даже просмотреть дни других месяцев и годов, в том числе через виджет date picker.

Note: You should be able to use the step attribute to vary the number of days jumped each time the date is incremented (e.g. maybe you only want to make Saturdays selectable). However, this does not seem to work effectively in any implementation at the time of writing.

Controlling input size

doesn’t support form sizing attributes such as size . You’ll have to resort to CSS for sizing needs.

Validation

By default, does not apply any validation to entered values. The UI implementations generally don’t let you enter anything that isn’t a date — which is helpful — but you can still leave the field empty or (in browsers where the input falls back to type text ) enter an invalid date (e.g. the 32nd of April).

If you use min and max to restrict the available dates (see Setting maximum and minimum dates), supporting browsers will display an error if you try to submit a date that is outside the set bounds. However, you’ll have to check the results to be sure the value is within these dates, since they’re only enforced if the date picker is fully supported on the user’s device.

In addition, you can use the required attribute to make filling in the date mandatory — again, an error will be displayed if you try to submit an empty date field. This, at least, should work in most browsers.

Let’s look at an example — here we’ve set minimum and maximum dates, and also made the field required:

If you try to submit the form with an incomplete date (or with a date outside the set bounds), the browser displays an error. Try playing with the example now:

Here’s a screenshot for those of you who aren’t using a supporting browser:

Here’s the CSS used in the above example. Here we make use of the или

If you try submitting it, you’ll see that the browser now displays an error message (and highlights the input as invalid) if your entry doesn’t match the pattern nnnn-nn-nn , where n is a number from 0 to 9. Of course, this doesn’t stop people from entering invalid dates, or incorrectly formatted dates, such as yyyy-dd-mm (whereas we want yyyy-mm-dd ). So we still have a problem.

The best way to deal with dates in forms in a cross-browser way at the moment is to get the user to enter the day, month, and year in separate controls ( представляет собой элемент управления который содержит меню опций:»> elements being popular; see below for an implementation), or to use a JavaScript library such as jQuery date picker.

Examples

In this example we create two sets of UI elements for choosing dates: a native picker and a set of three представляет собой элемент управления который содержит меню опций:»> elements for choosing dates in older browsers that don’t support the native input.

The months are hardcoded (as they are always the same), while the day and year values are dynamically generated depending on the currently selected month and year, and the current year (see the code comments below for detailed explanations of how these functions work.)

JavaScript

The other part of the code that may be of interest is the feature detection code — to detect whether the browser supports , we create a new используется для создания интерактивных элементов управления в веб-формах для принятия данных от пользователя; в зависимости от устройства и user agent, доступен широкий выбор типов входных данных и виджетов управления.»> element, set its type to date , then immediately check what its type is set to — non-supporting browsers will return text , because the date type falls back to type text . If is not supported, we hide the native picker and show the fallback picker UI ( представляет собой элемент управления который содержит меню опций:»> ) instead.

Note: Remember that some years have 53 weeks in them (see Weeks per year)! You’ll need to take this into consideration when developing production apps.

источник

Добавить комментарий

Adblock
detector