Полное руководство по датам в javascript

Displaying Dates

JavaScript will (by default) output dates in full text string format:

When you display a date object in HTML, it is automatically converted to a
string, with the method.

d = new Date();
document.getElementById(«demo»).innerHTML = d;

Same as:

d = new Date();
document.getElementById(«demo»).innerHTML = d.toString();

The method converts a date to a UTC string (a date display
standard).

var d = new Date();
document.getElementById(«demo»).innerHTML = d.toUTCString();

The method converts a date to a more readable
format:

var d = new Date();
document.getElementById(«demo»).innerHTML = d.toDateString();

The method converts a date to a string, using the ISO standard format:

JS Tutorial

JS HOMEJS IntroductionJS Where ToJS OutputJS StatementsJS SyntaxJS CommentsJS VariablesJS LetJS ConstJS OperatorsJS ArithmeticJS AssignmentJS Data TypesJS FunctionsJS ObjectsJS EventsJS StringsJS String MethodsJS NumbersJS Number MethodsJS ArraysJS Array MethodsJS Array SortJS Array IterationJS DatesJS Date FormatsJS Date Get MethodsJS Date Set MethodsJS MathJS RandomJS BooleansJS ComparisonsJS ConditionsJS SwitchJS Loop ForJS Loop For InJS Loop For OfJS Loop WhileJS BreakJS Type ConversionJS BitwiseJS RegExpJS ErrorsJS ScopeJS HoistingJS Strict ModeJS this KeywordJS Arrow FunctionJS ClassesJS JSONJS DebuggingJS Style GuideJS Best PracticesJS MistakesJS PerformanceJS Reserved Words

Преобразование дат

При создании даты может возникнуть необходимость поменять местами день и месяц (например, при передаче параметров в функцию), т.к. дата в привычном нам формате имеет синтаксис «день.месяц.год». Однако при создании даты с помощью класса Date необходимо передавать строку в формате «месяц/день/год». Для того чтобы изменить порядок расположения дня и месяца в дате, нужно использовать метод ) для строк:

Меняем местами день и месяц

JavaScript

1
2
3
4
5
6
7

let someDates=’22.06.1941′,’12.04.1961′,’01.09.1939′,’07.11.1917′,’24.08.1992′,’12.12.2012′,’01.01.2021′;

let dateFormat=someDates.map(one=>{

let dateStr=one.replace((\d{2})\.(\d{2})\.,’$2/$1/’);

console.log(one,dateStr);

returnnewDate(dateStr);

});

console.log(dateFormat);

В результате работы скрипта мы получим массив дат.

Пример: получение даты из поля типа date

В ряде случаев бывает необходимость в форме разместить поле с , например, для выбора даты начала и/или конца какого-либо периода (поездка, отправка груза и т.п.). Дата из такого поля возвращается в формате «гггг-мм-дд», хотя визуально выбор выглядит, как «дд.мм.гггг». Однако далеко не всегда такой формат подойдет для ваших целей. Кстати, если необходимо установить в поле ввода даты какое-то определенное число, то формат также должен быть «гггг-мм-дд», иначе вы получите предупреждение в консоли (в примере ниже нужно раскомментировать строки 19-21).

Давайте посмотрим, как мы можем использовать поле для ввода даты в скрипте:

Использование поля ввода даты

<div class=»testDate»>
<p id=»datePicker»></p>
<input type=»date» id=»myDate»>
<button type=»button» class=»button» id=»getDate»>Получить</button>
<button type=»button» class=»button» id=»setNowDate»>Установить сегодняшнюю дату</button>
</div>
<script>
getDate.addEventListener(‘click’, function() {
if (myDate.value == ») alert(‘Выберите сначала дату!’);
else {datePicker.innerHTML = ‘Дата из input: ‘+myDate.value;
datePicker.innerHTML += ‘<br>Преобразованная дата на основе <strong>new Date()</strong>: ‘
+new Date(myDate.value).toLocaleDateString();
datePicker.innerHTML += ‘<br>Преобразованная дата на основе <strong>регулярных выражений</strong>\
и <strong>метода replace()</strong>: ‘+myDate.value.replace(/(\d{4})-(\d{2})-(\d{2})/, ‘$3.$2.$1’);
}
});
setNowDate.addEventListener(‘click’, function() {
let now = new Date();
// myDate.value = now;
// myDate.value = now.toDateString();
// myDate.value = » + now.getFullYear() + ‘-‘ + (now.getMonth()+1) + ‘-‘ + now.getDate();
myDate.value = »+now.getFullYear()+’-‘+format(now.getMonth()+1)+’-‘+format(now.getDate());
});
</script>

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

22
23
24

<pid=»datePicker»><p>

<button type=»button»class=»button»id=»getDate»>Получить<button>

<button type=»button»class=»button»id=»setNowDate»>Установитьсегодняшнююдату<button>

<div>

getDate.addEventListener(‘click’,function(){

if(myDate.value==»)alert(‘Выберите сначала дату!’);

else{datePicker.innerHTML=’Дата из input: ‘+myDate.value;

datePicker.innerHTML+='<br>Преобразованная дата на основе <strong>new Date()</strong>: ‘

+newDate(myDate.value).toLocaleDateString();

datePicker.innerHTML+='<br>Преобразованная дата на основе <strong>регулярных выражений</strong>\

и <strong>метода replace()</strong>: ‘+myDate.value.replace((\d{4})-(\d{2})-(\d{2}),’$3.$2.$1’);

}

});

setNowDate.addEventListener(‘click’,function(){

let now=newDate();

// myDate.value = now;

// myDate.value = now.toDateString();

myDate.value=»+now.getFullYear()+’-‘+format(now.getMonth()+1)+’-‘+format(now.getDate());

});

</script>

Особенность получения даты на основе является то, что в полях месяц и день должен быть с ведущим нулем, если число меньше 10. Для решения этой проблемы воспользуемся функцией из скрипта .

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

Проверим пример на практике:

Получить Установить сегодняшнюю дату

GMT, UTC и Offset

GMT (время по Гринвичу)Местное время в Корее обычно . GMT — это сокращение от среднего времени по Гринвичу, которое является временем на часах Королевской Обсерватории в Гринвиче, Великобритания, расположенной на долготе 0. Система GMT начала распространяться 5 февраля 1925 года и была мировым стандартом времени до 1 января 1972 года.

UTC (универсальное глобальное время)Многие считают GMT и UTC одним и тем же, и во многих случаях они взаимозаменяемы, но на самом деле у них есть существенные отличия. UTC было создано в 1972 году для компенсации проблемы замедления вращения Земли. Эта система времени основана на Международном атомном времени, которое использует атомную частоту цезия для установки стандарта времени. Другими словами, UTC — более точная система. Хотя фактическая разница во времени между ними мала, UTC является более точным выбором для разработчиков программного обеспечения.

Когда система еще находилась в разработке, англоязычное население хотело назвать систему CUT (всемирное координированное время), а франкоязычное население хотело назвать ее TUC (Мировое время). Однако ни одна из сторон не выиграла бой, поэтому они пришли к соглашению об использовании аббревиатуры UTC, поскольку она содержала все основные буквы (C, T и U).

Offset (смещение часового пояса относительно часового пояса UTC) в означает, что местное время на 9 часов опережает стандартное время UTC. Это означает, что когда в Корее 21:00, в регионе — полдень, 12:00. Разница во времени между стандартным временем UTC и местным временем называется смещением (offset), которое выражается следующим образом: , и т. д.

Часто страны называют свои часовые пояса своими уникальными именами. Например, часовой пояс Кореи называется KST (стандартное время Кореи) и имеет определенное значение смещения, которое выражается как KST = . Однако смещение также используется не только Кореей, но и Японией, Индонезией и многими другими, что означает, что отношение между смещениями и именами часовых поясов не 1:1, а 1:N. Список стран со смещением можно найти в википедии на странице UTC+09:00.

Некоторые смещения не производятся строго на почасовой основе. Например, в Северной Корее в качестве стандартного времени используется , а в Австралии или , в зависимости от региона.

Полный список смещений UTC и их названия можно найти здесь: Список смещений времени UTC.

Time zone !== offset?Как я уже упоминал ранее, мы используем названия часовых поясов (KST, JST) взаимозаменяемо со смещением, не различая их. Но это неправильно рассматривать время и смещение в определенном регионе одинаково, по следующим причинам:

Летнее время (DST)Хотя это понятие может быть неизвестно в некоторых странах, во многих странах летнее время официально принято — в частности, в США, Великобритании и странах Европы. На международном уровне летнее время обычно называется Daylight Saving Time (DST). Во время перехода на DST мы переводим стрелки часов на один час вперед от стандартного времени в летнее время.

Например, в Калифорнии в США зимой используется PST (стандартное тихоокеанское время, ), а летом — PDT (тихоокеанское летнее время, ). Регионы Северной Америки, в которых используются два часовых пояса, вместе называются Тихоокеанским временем (PT), и это название принято во многих регионах США и Канады.

Теперь самое интересное: когда именно начинается и заканчивается лето? На самом деле, даты начала и окончания летнего времени остаются на собственное усмотрение каждой страны. Это раз. А два — страна может поменять время и до изменения мы должны будем учитывать одно время, а после изменения — другое.

Например, до 2006 года в США и Канаде летнее время начиналось с первого воскресенья апреля в 02:00 и длилось до последнего воскресенья октября в 12:00, а с 2007 года стало начинаться во второе воскресенье марта с 02:00 и длиться до 2:00 первого воскресенья ноября. В европейских странах летнее время применяется единовременно по всей стране, в то время как в США летнее время поочередно применяется к часовым поясам.

Creation

To create a new object call with one of the following arguments:

Without arguments – create a object for the current date and time:

Create a object with the time equal to number of milliseconds (1/1000 of a second) passed after the Jan 1st of 1970 UTC+0.

An integer number representing the number of milliseconds that has passed since the beginning of 1970 is called a timestamp.

It’s a lightweight numeric representation of a date. We can always create a date from a timestamp using and convert the existing object to a timestamp using the method (see below).

Dates before 01.01.1970 have negative timestamps, e.g.:

If there is a single argument, and it’s a string, then it is parsed automatically. The algorithm is the same as uses, we’ll cover it later.

Create the date with the given components in the local time zone. Only the first two arguments are obligatory.

The must have 4 digits: is okay, is not.
The count starts with (Jan), up to (Dec).
The parameter is actually the day of month, if absent then is assumed.
If is absent, they are assumed to be equal .

For instance:

The maximal precision is 1 ms (1/1000 sec):

Time API

Решение 1

Сохраняю только дату. Колонка . Тип поля DTO .

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

В браузер вернется . Неверно.

Решение 2

Надо делать десериализацию с таймзоной сервера.

Теперь сохраняется введенная дата.

Но это не будет работать для пользователя восточнее сервера.

Решение 3

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

Обратно с сервера вернется дата уже с временем . Поэтому это решение будет работать и для пользователей с запада от UTC.

Решение 4

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

Это решение работает, если даже переместить сервер в другую зону.

Чтобы предотвратить ошибку из-за передачи даты в формате ISO по времени UTC, достаточно указать формат. На дополнительные символы будет ругаться.

Решение 5

Чтобы сохранить время можно использовать . Но для конвертации строки в локальное время нужен десериалайзер с использованием . Поэтому буду использовать сразу его.

При изменении зоны сервера даты поедут.

Решение 7

Теперь можно перейти на тип колонки .

Чтобы сохранить в такую колонку, можно использовать , но обязательно сконвертировав в зону сервера. Потому что JDBC сам добавит в запрос смещение на основе зоны сервера. Postgres его учтет для конвертации в UTC.

Можно сохранять . Тогда будет передано то, что пришло из браузера.

Читать из базы драйвер позволяет только в .

Поэтому поле DTO можно сразу переделать в .

Решение 8

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

На сервере использовать и . Дополнительная настройка Jackson не нужна. При передаче времени с зоной он будет ругаться.

JavaScript

JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
clz32()
cos()
cosh()
E
exp()
expm1()
floor()
fround()
LN2
LN10
log()
log10()
log1p()
log2()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sign()
sin()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()

JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()

JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()

(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()

Класс GregorianCalendar

КлассGregorianCalendar – конкретная реализация класса Calendar, отображающий обыкновенный григорианский календарь.

Метод getInstance() Calendar возвращает GregorianCalendar, который по умолчанию инициализирован текущей датой и временем, локализацией и часовым поясом. GregorianCalendar определяет 2 поля: н. э и до н. э. Это две эпохи, определяющиеся по григорианскому календарю.

Конструкторы для объектов GregorianCalendar:

Название конструктора	Краткое описание
GregorianCalendar()	Создает GregorianCalendar, используя текущей датой и временем, локализацией и часовым поясом по умолчанию.
GregorianCalendar(int year, int month, int date)	Создает значение GregorianCalendar с учетом заданной даты в часовом поясе и локализацией по умолчанию.
GregorianCalendar(int year, int month, int date, int hour, int minute)	Конструирует GregorianCalendar в соответствии с заданной датой и временем в часовом поясе и локализацией по умолчанию.
GregorianCalendar(int year, int month, int date, int hour, int minute, int second)	Конструирует GregorianCalendar в соответствии с заданной датой и временем в часовом поясе и локализацией по умолчанию.
GregorianCalendar(Locale aLocale)	Формирует GregorianCalendar в соответствии с текущим временем в часовом поясе по умолчанию в рамках заданной локализации.
GregorianCalendar(TimeZone zone)	Создает GregorianCalendar, основанный на текущем времени в данной зоне времени с локализацией по умолчанию.
GregorianCalendar(TimeZone zone, Locale aLocale)	Формирует GregorianCalendar с учетом текущего времени в указанном часовом поясе и локализации.

Полезные методы класса GregorianCalendar:

Метод	Описание
void add(int field, int amount)	Добавляет указанное количество времени в данное временное поле в соответствии с правилами календаря.
protected void computeFields()	Преобразует время по Гринвичу в миллисекунды до значения полей времени.
protected void computeTime()	Преобразует значения временного поля Календаря в UTC формате в миллисекундах.
boolean equals(Object obj)	Сравнивает этот GregorianCalendar эталонным объектом.
int get(int field)	Получает значение для поля заданного времени.
int getActualMaximum(int field)	Возвращает максимальное значение, которое это поле может иметь, учитывая текущую дату.
int getActualMinimum(int field)	Возвращает минимальное значение, которое это поле может иметь, учитывая текущую дату.
int getGreatestMinimum(int field)	Возвращает наибольшее минимальное значение для данного поля, если изменяется.
Date getGregorianChange()	Получает изменения даты по григорианскому календарю.
int getLeastMaximum(int field)	Возвращает минимально максимальное значение для данного поля, если изменяется.
int getMaximum(int field)	Возвращает максимальное значение для данного поля.
Date getTime()	Определяет текущее время в соответствии с календарем.
long getTimeInMillis()	Получает текущее время по Календарю как длительное.
TimeZone getTimeZone()	Возвращает часовой пояс.
int getMinimum(int field)	Возвращает минимальное значение для данного поля.
int hashCode()	Переопределите хэш-код.
boolean isLeapYear(int year)	Определяет, является ли год високосным.
void roll(int field, boolean up)	Добавление или вычитание (вверх/вниз) одной единицы времени в данном временном поле без изменений в больших полях.
void set(int field, int value)	Устанавливает временное поле с заданным значением.
void set(int year, int month, int date)	Задает значения для поля год, месяц и дата.
void set(int year, int month, int date, int hour, int minute)	Задает значения для поля год, месяц, дату, час и минуту.
void set(int year, int month, int date, int hour, int minute, int second)	Задает значения для поля год, месяц, дату, час, минуту и секунду.
void setGregorianChange(Date date)	Устанавливает дату изменения грегорианского календаря.
void setTime(Date date)	Устанавливает в соответствии с данным календарем текущее время с заданной датой.
void setTimeInMillis(long millis)	Устанавливает в соответствии с данным календарем текущее время от заданного long значения.
void setTimeZone(TimeZone value)	Задает часовой пояс со значением заданного часового пояса.
String toString()	Возвращает строковое представление календаря.

Создание даты

Вы можете создать дату, использовав оператор new:

Со строкой даты.
С аргументами даты.
С меткой времени.
Без аргументов.

Способ со строкой даты

Мы передаем строку даты в конструктор .

new Date('1988-03-21')

Но если вы передадите строковое представление даты в формате 21-03-1988, то получите ошибку.

new Date(’21-03-1988′) приводит к ошибке Invalid Date.

В JavaScript нужно использовать формат даты, который принят во всем мире — ISO 8601.

// Расширенный формат ISO 8601
`YYYY-MM-DDTHH:mm:ss:sssZ`

Вот что означают значения:

: 4-значный год;
: двузначный месяц (где январь 01, а декабрь 12);
: двузначная дата (от 01 до 31);
: разделители даты;
: указывает на начало блока времени;
: часы в 24-часовом формате (от 00 до 23);
: минуты (от 00 до 59);
: секунды (от 00 до 59);
: миллисекунды (от 000 до 999);
: разделители времени;
: если присутствует, дата будет установлена в UTC. Если отсутствует, это будет местное время.

Часы, минуты, секунды и миллисекунды необязательны, если вы создаете дату. Если нужно передать дату 11 июня 2019 года:

new Date('2019-06-11')

Но если вы находитесь к востоку от Гринвича, то получите дату 10 июня.

new Date(‘2019-06-11’) выдаёт 10 июня, если вы находитесь к востоку от Гринвича

Если в районе, который опережает время по Гринвичу, то получите дату 11 июня.

new Date(‘2019-06-11’)выдаёт 11 июня, если вы находитесь к западу от Гринвича

Это происходит потому, что вы передаете дату без указания времени. В итоге JavaScript выводит дату, установленную в UTC.

Строка кода создает дату 11 июня 2019, 12:00 UTC. Вот почему люди, которые живут восточнее Гринвича, получают 10 июня вместо 11 июня.

Если вы хотите создать дату по местному часовому поясу, необходимо указать время. Когда вы включаете в дату время, вам нужно добавить, как минимум, часы и минуты (иначе Google Chrome возвращает недопустимую дату).

new Date('2019-06-11T00:00')

Дата по местному времени и дата в UTC.

Кстати, MDN предостерегает от использования строкового представления даты, поскольку браузеры могут ее трактовать по-разному.

MDN не рекомендует создавать даты с помощью строкового представления.

Создание дат с помощью аргументов

Конструктор Date принимает семь параметров:

Год: четырехзначный год.
Месяц: месяц года (0-11). По умолчанию 0.
День: день месяца (1-31). По умолчанию 1.
Час: час дня (0-23). По умолчанию 0.
Минуты: Минуты (0-59). По умолчанию 0.
Секунды: секунды (0-59). По умолчанию 0.
Миллисекунды: миллисекунды (0-999). По умолчанию 0.

// 11 июня 2019г. 5:23:59 местного времени
new Date(2019, 5, 11, 5, 23, 59)

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

new Date(2017, 3, 22, 5, 23, 50)
// Эту дату легко понять, если читать ее слева направо.
// Год: 2017
// Месяц: апрель (потому что месяца считаются с 0)
// Дата: 22
// Часы: 05
// Минут: 23
// Секунды: 50

Но помните, что порядок месяца начинаются с нуля. Например, январь – 0, февраль – 1, март – 2 и т. д.

Вот еще несколько примеров для закрепления:

// 21 марта 1988г. 00:00 местного времени
new Date(1988, 2, 21)
// 25 декабря 2019г. 8:00 местного времени 
new Date(2019, 11, 25, 8)
// 6 ноября 2023г. 2:20 местного времени
new Date(2023, 10, 6, 2, 20)
// 11 июня 2019г. 5:23:59 местного времени
new Date(2019, 5, 11, 5, 23, 59)

Даты, созданные с помощью аргументов, указаны по местному времени. Если вам понадобится дата в формате UTC, используйте следующий синтаксис:

// 11 июня 2019 00:00 UTC.
new Date(Date.UTC(2019, 5, 11))

Создание дат с помощью меток времени

В JavaScript метка времени – это количество миллисекунд, прошедших с 1 января 1970 г. (от начала эпохи Unix). Метки времени используются только для сравнения различных дат.

// 11 июня 2019 8:00 (по моему местному времени в Сингапуре)
new Date(1560211200000)

Без аргументов

Если использовать конструктор объекта Date() без аргументов, то он возвращает дату по местному времени.

new Date()

Текущее время.