JavaScript Получить текущее время и дату. TempusJS — работаем с датой в javascript Вот весь скрипт даты

15.09.2023

Дата и время являются частью нашей повседневной жизни и поэтому занимают видное место в программировании. В JavaScript при создании веб-сайта может потребоваться добавить календарь, расписание поездов или интерфейс для планирования встреч. Эти приложения должны показывать соответствующие моменты времени в зависимости от текущего часового пояса пользователя или выполнять вычисления, связанные с прибытием и вылетом самолета или временем начала и окончания какого-либо события. Кроме того, вам может потребоваться использовать JavaScript для отправки ежедневных отчетов в определенное время или для фильтрации (например, для поиска открытых в определенное время ресторанов).

Объект Date

Date – это встроенный объект JavaScript, который хранит дату и время. Он предоставляет ряд встроенных методов для форматирования и управления этими данными.

По умолчанию новый экземпляр Date без аргументов создает объект с текущей датой и временем в соответствии с системными настройками текущего компьютера.

Для примера попробуйте присвоить переменной текущую дату. Создайте файл now.js.

// Set variable to current date and time
const now = new Date();
// View the output
now;
Wed Oct 18 2017 12:41:34 GMT+0000 (UTC)

В выводе получается строка с датой, которая содержит следующие данные:

Дата и время разбиваются и отображаются удобным для восприятия образом.

Однако JavaScript воспринимает дату, исходя из временной метки Unix-времени, которая представляет собой значение, состоящее из количества миллисекунд, прошедших с полуночи 1 января 1970 года. Получить метку времени можно с помощью метода getTime().

// Get the current timestamp
now.getTime();
1508330494000

Большое число, которое появляется в выводе в качестве текущей временной метки, представляет собой количество миллисекунд, прошедших с полуночи 1 января 1970 года на 18 октября 2017 года.

Нулевое время (или epoch time) представлено строкой даты 01 January, 1970 00:00:00 Universal Time (UTC) и временной меткой 0. Вы можете проверить это в браузере, создав в файле epoch.js новую переменную и присвоив ей новый экземпляр Date, основанный на отметке времени 0.

// Assign the timestamp 0 to a new variable
const epochTime = new Date(0);
epochTime;
01 January, 1970 00:00:00 Universal Time (UTC)

Нулевое время было выбрано в качестве стандарта для измерения времени компьютерами, и этот метод используется в JavaScript. Важно понимать временные метки и строки дат, поскольку эти понятия могут использоваться в зависимости от настроек и цели приложения.

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

Чтобы продемонстрировать различные способы ссылок на конкретную дату, попробуйте создать новые объекты Date, которые будут представлять 4 июля 1776 года, 12:30 по Гринвичу тремя различными способами.

// Timestamp method
new Date(-6106015800000);
// Date string method
new Date("January 31 1980 12:30");
// Date and time method
new Date(1776, 6, 4, 12, 30, 0, 0);

Все эти примеры представляют одну и ту же информацию о дате и времени тремя разными способами.

Как видите, метод временной метки имеет отрицательное число; любая дата до нулевого времени будет представлена как отрицательное число.

В третьем примере секунды и миллисекунды представлены 0. Если при создании объекта Date вам не хватает каких-либо данных, вы должны присвоить им 0. Отсутствующие данные нельзя пропускать, поскольку порядок данных о времени в строке не меняется. Также следует отметить, что месяц июль здесь обозначен как 6, а не как 7. Это происходит потому, что отсчет начинается не с 1, а с 0. Подробнее об этом – в следующем разделе.

Извлечение даты с помощью get

Имея дату, вы можете получить доступ ко всем ее компонентам с помощью различных встроенных методов. Методы возвращают каждую часть даты относительно локального часового пояса. Каждый из этих методов начинается с get и возвращает относительное число. Ниже приведена подробная таблица методов get для объекта Date.

Дата/Время	Метод	Диапазон	Пример
Год	getFullYear()	YYYY	1970
Месяц	getMonth()	0-11	0 = January
День месяца	getDate()	1-31	1 = 1st of the month
День недели	getDay()	0-6	0 = Sunday
Час	getHours()	0-23	0 = midnight
Минута	getMinutes()	0-59
Секунда	getSeconds()	0-59
Миллисекунда	getMilliseconds()	0-999
Временная метка	getTime()

// Initialize a new birthday instance
const birthday = new Date(1980, 6, 31);

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

birthday.getFullYear(); // 1980
birthday.getMonth(); // 6
birthday.getDate(); // 31
birthday.getDay(); // 4
birthday.getHours(); // 0
birthday.getMinutes(); // 0
birthday.getSeconds(); // 0
birthday.getMilliseconds(); // 0
birthday.getTime(); // 333849600000 (for GMT)

Иногда бывает необходимо извлечь только часть даты, и встроенные методы get помогут вам в этом.

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

// Get today"s date
const today = new Date();
// Compare today with October 3rd
if (today.getDate() === 3 && today.getMonth() === 9) {
console.log("It"s October 3rd.");
} else {
console.log("It"s not October 3rd.");
}
It"s not October 3rd.

Встроенные методы get позволяют получать доступ к компонентам даты.

Изменение даты с помощью set

Для всех перечисленных выше методов get существует соответствующий метод set. Если get используется для извлечения определенного компонента даты, set используется для изменения этих компонентов. Ниже приведена подробная таблица методов set для объекта Date.

Дата/Время	Метод	Диапазон	Пример
Год	setFullYear()	YYYY	1970
Месяц	setMonth()	0-11	0 = January
День месяца	setDate()	1-31	1 = 1st of the month
День недели	setDay()	0-6	0 = Sunday
Час	setHours()	0-23	0 = midnight
Минута	setMinutes()	0-59
Секунда	setSeconds()	0-59
Миллисекунда	setMilliseconds()	0-999
Временная метка	setTime()	Количество миллисекунд с нулевого времени

Эти методы set можно использовать для изменения одного или нескольких компонентов даты. Например, можно изменить год в переменной birthday на 1997.

// Change year of birthday date
birthday.setFullYear(1997);
birthday;
Thu Jul 31 1997 00:00:00 GMT+0000 (UTC)

Теперь при вызове переменной birthday вы видите не 1980, а 1997 год.

Встроенные методы set позволяют изменять разные части объекта Date.

Методы UTC

Методы get, описанные выше, извлекают компоненты даты на основе локальных настроек часового пояса пользователя. Чтобы увеличить контроль над датами и временем, вы можете использовать методы getUTC, которые работают так же, как методы get, но вычисляют время, основанное на стандарте UTC (всемирное координированное время). Ниже приведена таблица методов UTC для объекта Date в JavaScript.

Дата/Время	Метод	Диапазон	Пример
Год	getUTCFullYear()	YYYY	1970
Месяц	getUTCMonth()	0-11	0 = January
День месяца	getUTCDate()	1-31	1 = 1st of the month
День недели	getUTCDay()	0-6	0 = Sunday
Час	getUTCHours()	0-23	0 = midnight
Минута	getUTCMinutes()	0-59
Секунда	getUTCSeconds()	0-59
Миллисекунда	getUTCMilliseconds()	0-999

Чтобы проверить разницу между локальными методами get и методами get UTC, запустите следующий код.

// Assign current time to a variable
const now = new Date();
// Print local and UTC timezones
console.log(now.getHours());
console.log(now.getUTCHours());

Этот код выведет текущее время и время по часовому поясу UTC. Если вы сейчас находитесь в часовом поясе UTC, то числа, которые выведет программа, будут одинаковыми.

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

Заключение

В этом мануале вы узнали, как создать экземпляр объекта Date, как использовать его встроенные методы для доступа и изменения компонентов определенной даты. Более подробную информацию о времени и дате в JavaScript вы можете найти на Mozilla Developer Network .

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

Tags: JavaScript - Урок 11. Дата, представление и обработка В JavaScript дата определяется количеством миллисекунд, прошедших с 1 января 1970 года.

Для работы с датой и временем применяется встроенный объект Date . Этот объект не имеет свойств, но обладает несколькими методами, позволяющими устанавливать и изменять дату и время.

Объект Date создается с помощью оператороа new и конструктора - Date .

Например:

var myData=new Date();

Значением переменной myData будет текущая дата и время:

Методами объекта Date можно получать отдельно значения месяца, дня недели, часов, минут и секунд:

getDate - возвращает число в диапазоне от 1 до 31, представляющее число месяца.
getHours - возвращает час суток в диапазоне от 0 (полночь) до 23.
getMinutes - возвращает минуты в диапазоне от 0 до 59.
getSeconds - возвращает секунды в диапазоне от 0 до 59.

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

Javascript дата

Теперь напишем саму функцию nTime() :

function nTime(obj) { var t=new Date(); var h=t.getHours(); var m=t.getMinutes(); var s=t.getSeconds(); var result=h+":"+m+":"+s; obj.res.value=result; }

* как вы помните методы отделяются от объекта точкой, об этом мы говорили в уроке 3 * Как видите, все просто. Сначала определяем текущее время, а потом с помощью методов извлекаем из него отдельные значения часов, минут и секунд.

Здесь еще хочется пояснить строку var result=h+":"+m+":"+s . Впервые мы столкнулись с необходимостью выводить в результат, как значения переменных, так и простой текст. В принципе ничего сложного: переменные пишутся как есть, текст берется в кавычки, а знак + осуществляет операцию конкатенации, т.е. их объединения.

В нашем примере остался один недочет, мы хотели, чтобы время выводилось в формате "чч:мм:сс", а сейчас оно выводится в формате "ч:м:с". Т.е., в 5 утра, время будет отображаться как "5:0:0", а хотелось бы так: "05:00:00" (что более привычно). В качестве домашнего задания можете попробовать это исправить. Например, с помощью оператора if и строкового литерала "0" (идея проста: если часов меньше 10, то в результат перед h написать "0" и так со всеми переменными).

А пока продолжим изучать методы объекта Date :

getDay - возвращает день недели, как целое число от 0 (воскресенье) до 6 (суббота).
getMonth - возвращает номер месяца в году, как целое число от 0 (январь) до 11 (декабрь).
getYear - возвращает год в виде двух последних цифр (getFullYear - возвращает год в виде четырех цифр).
* К сожалению, начиная с 2000 года, есть проблема с отображением года в разных браузерах. Метод getYear в IE отображает полный год (вместо двух последних цифр), а FireFox вместо XX отображает 1XX (т.е. подставляет 1). Поэтому предпочтительнее использовать метод getFullYear.

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

Код html-страницы будет простой:

Javascript дата

Теперь напишем саму функцию tData() :

Function tData(obj) { var s; var t=new Date(); var y=t.getFullYear(); var d=t.getDate(); var mon=t.getMonth(); switch (mon) { case 0: s="января"; break; case 1: s="февраля"; break; case 2: s="марта"; break; case 3: s="апреля"; break; case 4: s="мае"; break; case 5: s="июня"; break; case 6: s="июля"; break; case 7: s="августа"; break; case 8: s="сентября"; break; case 9: s="октября"; break; case 10: s="ноября"; break; case 11: s="декабря"; break; } var result=d+" "+s+" "+y; obj.res.value=result; }

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

Рассмотренные выше методы позволяют получать дату. Если же нам потребуется установить дату, то следует использовать следующие методы:

setDate - устанавливает число месяца в диапазоне от 1 до 31.
setHours - устанавливает час для текущего времени в диапазоне от 0 (полночь) до 23.
setMinutes - устанавливает минуты в диапазоне от 0 до 59.
setSeconds - устанавливает секунды в диапазоне от 0 до 59.
setYear - устанавливает значение года.
setMonth - устанавливает значение месяца в диапазоне от 0 (январь) до 11 (декабрь).
setTime - устанавливает значение объекта Date и возвращает количество миллисекунд, прошедших с 1 января 1970 года.

Так, если нам потребуется задать дату 06 декабря 2010 года, в функции мы будем иметь следующий код:

Var t=new Date(); var y=t.setYear(2010); var d=t.setDate(6); var mon=t.setMonth(11); ...

Задать дату можно прямо в конструкторе, указав в качестве параметра строку формата "месяц, день, год часы:минуты:секунды":

Var t=new Date("Feb,10,1975 17:45:10");

Значение часов, минут и секунд можно опустить (они будут равны нулю):

Var t=new Date("Feb,10,1975");

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

Var t=new Date(75, 1, 10, 17, 45, 10);

Или же, опуская часы, минуты и секунды (они будут равны нулю):

Var t=new Date(75, 1, 10);

* Есть проблема: IE год отображать не хочет, поэтому лучше эти варианты не использовать.

Вот собственно и все, вы вполне готовы самостоятельно написать сценарий, который при загрузке страницы отобразит дату, время и день ее посещения (в нормальном русском виде). Удачи!

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

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

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

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

//
// ]]>
// ]]>
// ]]>
// ]]>
// ]]>
! Сегодня
// + " " + d.getFullYear() + " г.");
// ]]>
// ]]>
// ]]>
// ]]>
// ]]>
// ]]>

Выглядит он так:

Сегодня

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

Подробнее:

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

document.write(TODAY);

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

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

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

Используйте new Date() для создания нового объекта Date содержащего текущую дату и время.

Обратите внимание, что Date() вызываемая без аргументов, эквивалентна new Date(Date.now()) .

Когда у вас есть объект даты, вы можете применить любой из нескольких доступных методов для извлечения его свойств (например, getFullYear() чтобы получить 4-значный год).

Ниже приведены некоторые общие методы даты.

Получить текущий год var year = (new Date()).getFullYear(); console.log(year); // Sample output: 2016 Получить текущий месяц var month = (new Date()).getMonth(); console.log(month); // Sample output: 0

Обратите внимание, что 0 = январь. Это потому, что месяцы варьируются от 0 до 11 , поэтому часто желательно добавить +1 к индексу.

Получить текущий день var day = (new Date()).getDate(); console.log(day); // Sample output: 31 Получить текущий час var hours = (new Date()).getHours(); console.log(hours); // Sample output: 10 Получить текущие минуты var minutes = (new Date()).getMinutes(); console.log(minutes); // Sample output: 39 Получить текущие секунды var seconds = (new Date()).getSeconds(); console.log(second); // Sample output: 48 Получить текущие миллисекунды

Чтобы получить миллисекунды (от 0 до 999) экземпляра объекта Date , используйте метод getMilliseconds .

Var milliseconds = (new Date()).getMilliseconds(); console.log(milliseconds); // Output: milliseconds right now

Преобразование текущего времени и даты в удобочитаемую строку var now = new Date(); // convert date to a string in UTC timezone format: console.log(now.toUTCString()); // Output: Wed, 21 Jun 2017 09:13:01 GMT

Статический метод Date.now() возвращает количество миллисекунд, прошедших с 1 января 1970 года 00:00:00 по UTC. Чтобы получить количество миллисекунд, прошедших с того времени, используя экземпляр объекта Date , используйте его метод getTime .

// get milliseconds using static method now of Date console.log(Date.now()); // get milliseconds using method getTime of Date instance console.log((new Date()).getTime());

Редкому программисту случается избежать работы с датой и временем. Вообще, дата/время - базовое понятие и в основной массе языков существуют встроенные механизмы работы с этим типом данных. Казалось бы, JS не исключение, есть встроенный тип Date, есть куча функций в прототипе, однако…

Кто виноват Первая проблема возникает когда нужно задать дату/время в тайм-зоне отличной от UTC и от локальной. Конструктор Date не имеет такого параметра.

New Date(); new Date(value); new Date(dateString); new Date(year, month[, day[, hour[, minute[, second[, millisecond]]]]]);
Единственный вариант, где можно указать смещение относительно UTC - третий способ. Вызов конструктора в этом формате позволяет передать смещение как часть строки:

New Date("Sun Feb 01 1998 00:00:00 GMT+0700")
Строка принимается в формате RFC2822, весьма неудобном и трудном к ручному вводу. Получить такую строку из пользовательского ввода практически невозможно. Я не могу себе представить человека, который бы согласился вводить дату в таком формате.

Не смотря на то, что в Date можно установить все параметры по отдельности для таймзоны UTC - проблемы это не решает – таймзона останется локальной. Но это не единственная проблема.

Смещение относительно UTC - не константа. Это функция от даты, времени (ну или от таймштампа, если угодно) и, опять же, тайм-зоны. Например, для Москвы последний перевод времени даёт:

New Date(2014, 9, 25, 0, 0, 0); // 26.10.2014, 21:00:00 GMT+3 new Date(2014, 9, 27, 0, 0, 0); // 25.10.2014, 22:00:00 GMT+4
Таким образом, конструктор в третьем варианте становится практически бесполезным поскольку смещение нужно знать заранее. А оно, как было сказано, так просто получено быть не может. Единственная библиотека, из попавшихся мне, которая использует базу данных Олсона для обсчета сдвигов - timezone-JS . Проблема использования этой библиотеки в том, что низлежащие библиотеки (date/time picker-ы) про неё ничего не знают и внутри активно используют стандартный Date. Остальные библиотеки, работающие с объектом Date, явно на эту базу не ссылаются и обновления из нее не получают. (Поправьте меня в комментариях.)

В бизнес применении тайм-зоны имеют смысл только если заданы дата и время. К примеру, если рабочий день начинается в 9:00, то вряд ли вы ожидаете что ваш коллега из Владивостока начнет работать в 15:00. Таймзоны учитываться не должны и в таком случае отображать дату нужно в UTC. Однако, в случае с регулярными событиями, происходящими в один момент времени в разных часовых поясах, таймзона все таки нужна. К примеру, ваш ежедневный скрам начинается в 10:00 для вас и в 13:00 для Новосибирска. Между прочим, в этом как раз и есть разница между GMT и UTC. UTC – это время без смещения, а GMT – это время со смещением 0. Поясню на примере:

31.12.2014, 20:59:59 GMT в Московском часовом поясе должно выглядеть как 31.12.2014, 23:59:59 31.12.2014, 20:59:59 UTC в Московском часовом поясе должно выглядеть как 31.12.2014, 20:59:59
Из-за этой арифметики их в основном и путают. К сожалению, напутано с этим параметром повсеместно. Отсутствие прямого указания таймзоны в JS трактуется как локальная таймзона, а указание UTC и GMT равнозначно.

В ситуации мог бы помочь Intl . Мог бы, но не обязан. В частности, там есть такой параметр timeZone, но, чуть далее стандартом определено: The time zone to use. The only value implementations must recognize is «UTC». В настоящее время кроме Chrome не один браузер произвольные таймзоны не поддерживает.
С диапазонами времени в JS все совсем плохо - ничего подобного в языке нет. Хочешь сделать хорошо – делай сам.

Что делать

Вариант 1.Не использовать произвольную таймзону. Вариант предпочтительный и, наверное, самый безболезненный. То есть, у вас есть только локальная таймзона и UTC. Для этих случаев во всех браузерах вроде как всё есть, пусть и не очень удобно. К тому же, таймзона выставляется глобально для ОС и менять ее для конкретного web-приложения некошерно.
Вариант 2.Если произвольные таймзоны необходимы - не использовать таймштамп. Совсем. Храните время в сберегательной кассе в RFC строке с указанием таймзоны. Не уверен что это поможет победить сдвиги таймзоны в кроссбраузерном понимании, но, как минимум, Chrome о таких сдвигах в курсе.
Вариант 3.Ситуации бывают разные и случается так, что в базу время записывается с какого ни будь устройства. То есть в виде таймштампа. Тут бежать некуда, что бы корректно отобразить время нужно знать либо таймзону устройства, либо таймзону пользователя, либо и того и другого и обсчитывать все сдвиги врукопашную. Без использования базы Олсона тут не обойтись.

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

Похожие статьи: