How to format date in javascript
Содержание:
Синтаксис конструктора объекта
new Date(); // создает объект Date со значением, равным текущим дате и времени new Date(value); // числовой аргумент new Date(dateString); //строковый аргумент new Date(year, monthIndex, day, hours, minutes, seconds, milliseconds); // от 2 до 7 числовых аргументов value - Integer dateString - String year, monthIndex, day, hours, minutes, seconds, milliseconds - Integer
Обратите внимание на то, что объекты Date могут быть созданы только путем вызова Date в качестве конструктора, в случае вызова в качестве обычной функции (без использования оператора new), то в качестве возвращаемого значения мы получим строку, а не объект Date. При таком вызове Date() (как функция — без оператора new) игнорирует любые переданные аргументы
В отличие от других типов объектов JavaScript, объекты Date не имеют литерального синтаксиса.
Конструктор Date(), вызванный без аргументов создаст объект Date со значением, которое будет соответствовать текущей дате и времени.
Если конструктору передается единственный числовой аргумент, то это значение используется как внутреннее числовое представление даты в миллисекундах. Это значение аналогично значению, которое возвращается с использованием метода getTime().
Если конструктору передается единственный строковый аргумент, то это значение рассматривается как строковое представление даты в формате, принимаемом методом parse().
Конструктору Date() допускается так же передать от двух до семи числовых аргументов, которые определяют индивидуальные настройки даты и времени
Используя этот синтаксис, обратите внимание на то, что все аргументы, кроме первых двух (год и месяц) не являются обязательными. Полное описание аргументов конструктора представлено ниже
Значение параметров
Параметр | Описание |
---|---|
value | Целое значение, представляющее количество миллисекунд с 00:00:00 1 января 1970 по UTC. |
dateString | Строковое значение, представляющее дату. Строка должна быть в формате, распознаваемом методом parse() (совместимые с IETF RFC 2822 временные метки, а также ISO8601). |
year | Целое значение, представляющее год. Значения от до 99 соответствуют годам с 1900 по 1999. |
monthIndex | Целое значение, представляющее месяц. Значение соответствует январю, а 11 декабрю. |
day | День месяца, заданный в виде целого значения от 1 до 31. Необязательный аргумент. |
hours | Часы, заданные в виде целого от (полночь) до 23 (11 часов вечера). Необязательный аргумент. |
minutes | Целое значение от до 59, представляющее минутный отрезок времени. Необязательный аргумент. |
seconds | Целое значение от до 59, представляющее секундный отрезок времени. Необязательный аргумент. |
milliseconds | Целое значение от до 999, представляющее миллисекундный отрезок времени. Необязательный аргумент. |
Разбор строки, Date.parse
Все современные браузеры, включая IE9+, понимают даты в упрощённом формате ISO 8601 Extended.
Этот формат выглядит так: , где:
- – дата в формате год-месяц-день.
- Обычный символ используется как разделитель.
- – время: часы-минуты-секунды-миллисекунды.
- Часть обозначает временную зону – в формате , либо символ , обозначающий UTC. По стандарту её можно не указывать, тогда UTC, но в Safari с этим ошибка, так что лучше указывать всегда.
Также возможны укороченные варианты, например или или даже только .
Метод разбирает строку в таком формате и возвращает соответствующее ей количество миллисекунд. Если это невозможно, возвращает .
Например:
С таймзоной :
Формат дат для IE8-
До появления спецификации ECMAScript 5 формат не был стандартизован, и браузеры, включая IE8-, имели свои собственные форматы дат. Частично, эти форматы пересекаются.
Например, код ниже работает везде, включая старые IE:
Вы также можете почитать о старых форматах IE в документации к методу MSDN Date.parse.
Конечно же, сейчас лучше использовать современный формат. Если же нужна поддержка IE8-, то метод , как и ряд других современных методов, добавляется библиотекой es5-shim.
Получение даты из другой даты
Чтобы получить дату из другой даты, нужно:
- Установить конкретное значение даты/времени из другой даты.
- Добавить/вычесть отрезок времени из другой даты.
Установка конкретной даты / времени
Для этого можно использовать следующие методы:
- : устанавливает четырехзначный год по местному времени.
- : устанавливает месяц года по местному времени.
- : устанавливает день месяца по местному времени.
- : устанавливает часы по местному времени.
- : устанавливает минуты по местному времени.
- : устанавливает секунды по местному времени.
- : устанавливает миллисекунды по местному времени.
Например, если вы хотите задать дату для 15 числа месяца, вы можете использовать метод .
const d = new Date(2019, 0, 10) d.setDate(15) console.log(d) // 15 января 2019
Чтобы установить июнь месяц, примените метод :
const d = new Date(2019, 0, 10) d.setMonth(5) console.log(d) // 10 июня 2019
Методы установки значений даты изменяют исходный объект Date(). На практике лучше модифицировать отдельный экземпляр объекта.
const d = new Date(2019, 0, 10) const newDate = new Date(d) newDate.setMonth(5) console.log(d) // 10 января 2019 console.log(newDate) // 10 июня 2019
Добавление/вычитание периода времени из другой даты
Чтобы добавить/вычесть период времени, нужно знать значение текущей даты. Его можно получить с помощью следующих методов:
- : возвращает четырехзначный год по местному времени.
- : возвращает месяц года (0-11) по местному времени.
- : возвращает день месяца (1-31) по местному времени.
- : возвращает часы (0-23) по местному времени.
- : возвращает минуты (0-59) по местному времени.
- : возвращает секунды (0-59) по местному времени.
- : возвращает миллисекунды (0-999) по местному времени.
Допустим, что вы хотите назначить свидание через три дня (начиная с сегодняшнего дня). Предположим, что сегодня 28 марта 2019 года.
Первый подход (установка значения)
// Подразумеваем, что сегодня 28 марта 2019 const today = new Date(2019, 2, 28)
Сначала создаем новый объект Date (чтобы не изменять исходный экземпляр объекта):
const finalDate = new Date(today)
С помощью получаем значение, которое хотим изменить:
const currentDate = today.getDate()
Свидание произойдет через три дня. Поэтому добавляем их к текущей дате:
finalDate.setDate(currentDate + 3)
Полный код для первого подхода:
const today = new Date(2019, 2, 28) const finalDate = new Date(today) finalDate.setDate(today.getDate() + 3) console.log(finalDate) // 31 марта 2019
Второй подход (создание новой даты)
Сначала используем , , и другие методы, пока не получим типа значения, которое мы изменить. Затем мы создаём искомую дату при помощи .
const today = new Date(2019, 2, 28) // Получение нужных значений const year = today.getFullYear() const month = today.getMonh() const day = today.getDate() // Создание новой даты const finalDate = new Date(year, month, day + 3) console.log(finalDate) // 31 марта 2019
Оба подхода работают.
Объект Date. Работа с датами
Объект Date позволяет работать с датами и временем в JavaScript.
Существуют различные способы создания объекта Date. Первый способ заключается в использовании пустого конструктора без параметров:
var currentDate = new Date(); document.write(currentDate);
В этом случае объект будет указывать на текущую дату компьютера:
Второй способ заключается в передаче в конструктор Date количества миллисекунд, которые прошли с начала эпохи Unix, то есть с 1 января 1970
года 00:00:00 GMT:
var myDate = new Date(1359270000000); document.write(myDate); // Sun Jan 27 2013 10:00:00 GMT+0300 (RTZ 2 (зима))
Третий способ состоит в передаче в конструктор Date дня, месяца и года:
var myDate = new Date("27 March 2008"); // или так // var myDate = new Date("3/27/2008"); document.write(myDate); // Thu Mar 27 2008 00:00:00 GMT+0300 (RTZ 2 (зима))
Если мы используем полное название месяца, то оно пишется в по-английски, если используем сокращенный вариант, тогда используется формат месяц/день/год.
Четвертый способ состоит в передаче в конструктор Date всех параметров даты и времени:
var myDate = new Date(2012,11,25,18,30,20,10); // Tue Dec 25 2012 18:30:20 GMT+0300 (RTZ 2 (зима))
В данном случае используются по порядку следующие параметры: .
При этом надо учитывать, что отсчет месяцев начинается с нуля, то есть январь — 0, а декабрь — 11.
Получение даты и времени
Для получения различных компонентов даты применяется ряд методов:
-
getDate(): возвращает день месяца
-
getDay(): возвращает день недели (отсчет начинается с 0 — воскресенье, и последний день — 6 — суббота)
-
getMonth(): возвращает номер месяца (отсчет начинается с нуля, то есть месяц с номер 0 — январь)
-
getFullYear(): возвращает год
-
toDateString(): возвращает полную дату в виде строки
-
getHours(): возвращает час (от 0 до 23)
-
getMinutes(): возвращает минуты (от 0 до 59)
-
getSeconds(): возвращает секунды (от 0 до 59)
-
getMilliseconds(): возвращает миллисекунды (от 0 до 999)
-
toTimeString(): возвращает полное время в виде строки
Получим текущую дату:
var days = ; var months = ; var myDate = new Date(); var fullDate = "Сегодня: " + myDate.getDate() + " " + months + " " + myDate.getFullYear() + ", " + days; document.write(fullDate); // Сегодня: 18 Август 2015, Вторник
Перевести из числовых значений в более привычные названия для дней недели и месяцев используются массивы. Получив индекс дня недели ()
и индекс месяца () можно получить нужный элемент из массива.
Теперь получим текущее время:
var welcome; var myDate = new Date(); var hour = myDate.getHours(); var minute = myDate.getMinutes(); var second = myDate.getSeconds(); if (minute < 10) { minute = "0" + minute; } if (second < 10) { second = "0" + second; } if (hour < 12) { welcome = "Доброе утро"; } else if (hour < 17) { welcome = "Добрый день"; } else { welcome = "Добрый вечер"; } document.write(welcome + ", текущее время: " + hour + ":" + minute + ":" + second); // Добрый вечер, текущее время: 22:50:39
Установка даты и времени
Коме задания параметров даты в конструкторе для установки мы также можем использовать дополнительные методы объекта Date:
-
setDate(): установка дня в дате
-
setMonth(): уставовка месяца (отсчет начинается с нуля, то есть месяц с номер 0 — январь)
-
setFullYear(): устанавливает год
-
setHours(): установка часа
-
setMinutes(): установка минут
-
setSeconds(): установка секунд
-
setMilliseconds(): установка миллисекунд
Установим дату:
var days = ; var months = ; var myDate = new Date(); myDate.setDate(15); myDate.setMonth(6); myDate.setYear(2013); var fullDate = myDate.getDate() + " " + months + " " + myDate.getFullYear() + ", " + days; document.write(fullDate); // 15 Июль 2013, Понедельник
При установке значений мы можем передать величину, большую, чем максимальное допустимое значение. Например, установить для часа число 54:
myDate.setHour(54);
В этом случае значение часа будет равно 54 — 24 * 2 = 6, а оставшиеся часы будут составлять два дня (24 * 2), что прибавит к дате два дня. То же самое действует и
в отношении дней, минут, секунд, миллисекунд и месяцев.
НазадВперед
Создание даты
Вы можете создать дату, использовав оператор 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()
Текущее время.
Introduction
I needed a JavaScript date format function such as the Visual Basic function, in which you can pass a format string; my first approach was to issue a series of consecutive and «destructive» replace calls, but upon discovering that the 5.5 (or higher) version of JScript supported the use of a function as the argument of the method, I got creative.
Here’s an example call of what I wanted:
JavaScript
Copy Code
SomeDiv.innerText = (new Date()).format('dddd, mmmm dd, yyyy.');
This would display:
Copy Code
Saturday, July 16, 2005
So in my first approach, I globally and case-insensitively replaced dddd with the corresponding string, which «destroyed» every occurrence, so that later in the code I could replace dd with the date number.
This worked just fine, but I knew that by inspecting the format specifier for a match, I could skip the search of every format specifier; say I only want the month and the date; well, by switching upon the format specifier (or rather «datepart» specifier), the year replacement will never be issued. Get it?
The fun part relies in the use of a function in the argument of the method; this way the property as a function argument always represents the last match.
Other considerations include the format or «datepart» specifiers: none other than will be parsed as the year; months and days have the usual three flavors of fullname (), three-letter () or numeric (); hours () can be rectified to the 12-hour format with the specifier, and minutes () and seconds () may also be specified.
Задание определенной даты
Как получить текущее время мы разобрались, а как создать объект , который бы содержал другую дату или время?
Тут тоже все просто. Чтобы задать определенный день, нужно написать код вида:
Все просто и очевидно, но есть два нюанса:
- Год нужно задавать от 1900.
- Месяцы нумеруются с нуля.
Интересно
Это тоже наследие операционной системы Unix: там программисты обозначали год двумя цифрами. Вместо 1977 писали просто 77. Поэтому 77 станет правильным годом, если мы считаем от 1900 года.
Например, я родился 21 марта 1989 года. Март — третий месяц, значит мне нужно написать
Код | Вывод на экран |
---|---|
Месяцы нумеруются с нуля, а дни — нет. Немного странно, да?
Думаем, настоящие программисты должны были пересилить себя и дни месяца тоже нумеровать с нуля. Ох уж эти конформисты
Задание определенного времени
Задать определенное время тоже достаточно просто: для этого нужно написать команду вида:
Часы, минуты и секунды нумеруются с нуля: программист внутри вас должен вздохнуть спокойно.
Пример:
Код | Вывод на экран |
---|---|
Мы задали время 12:15 и дату 4 июня 2005 года. Читается немного сложновато для не программиста, зато работает как надо.
Usage
As taken from Steven’s post, modified to match the Modifications listed above:
var dateFormat = require("dateformat"); var now = new Date(); // Basic usage dateFormat(now, "dddd, mmmm dS, yyyy, h:MM:ss TT"); // Saturday, June 9th, 2007, 5:46:21 PM // You can use one of several named masks dateFormat(now, "isoDateTime"); // 2007-06-09T17:46:21 // ...Or add your own dateFormat.masks.hammerTime = 'HH:MM! "Can\'t touch this!"'; dateFormat(now, "hammerTime"); // 17:46! Can't touch this! // You can also provide the date as a string dateFormat("Jun 9 2007", "fullDate"); // Saturday, June 9, 2007 // Note that if you don't include the mask argument, // dateFormat.masks.default is used dateFormat(now); // Sat Jun 09 2007 17:46:21 // And if you don't include the date argument, // the current date and time is used dateFormat(); // Sat Jun 09 2007 17:46:22 // You can also skip the date argument (as long as your mask doesn't // contain any numbers), in which case the current date/time is used dateFormat("longTime"); // 5:46:22 PM EST // And finally, you can convert local time to UTC time. Simply pass in // true as an additional argument (no argument skipping allowed in this case): dateFormat(now, "longTime", true); // 10:46:21 PM UTC // ...Or add the prefix "UTC:" or "GMT:" to your mask. dateFormat(now, "UTC:h:MM:ss TT Z"); // 10:46:21 PM UTC // You can also get the ISO 8601 week of the year: dateFormat(now, "W"); // 42 // and also get the ISO 8601 numeric representation of the day of the week: dateFormat(now, "N"); // 6
Mask options
Mask | Description |
---|---|
Day of the month as digits; no leading zero for single-digit days. | |
Day of the month as digits; leading zero for single-digit days. | |
Day of the week as a three-letter abbreviation. | |
«Ysd», «Tdy» or «Tmw» if date lies within these three days. Else fall back to ddd. | |
Day of the week as its full name. | |
«Yesterday», «Today» or «Tomorrow» if date lies within these three days. Else fall back to dddd. | |
Month as digits; no leading zero for single-digit months. | |
Month as digits; leading zero for single-digit months. | |
Month as a three-letter abbreviation. | |
Month as its full name. | |
Year as last two digits; leading zero for years less than 10. | |
Year represented by four digits. | |
Hours; no leading zero for single-digit hours (12-hour clock). | |
Hours; leading zero for single-digit hours (12-hour clock). | |
Hours; no leading zero for single-digit hours (24-hour clock). | |
Hours; leading zero for single-digit hours (24-hour clock). | |
Minutes; no leading zero for single-digit minutes. | |
Minutes; leading zero for single-digit minutes. | |
ISO 8601 numeric representation of the day of the week. | |
GMT/UTC timezone offset, e.g. -0500 or +0230. | |
GMT/UTC timezone offset, e.g. -05:00 or +02:30. | |
Seconds; no leading zero for single-digit seconds. | |
Seconds; leading zero for single-digit seconds. | |
The date’s ordinal suffix (st, nd, rd, or th). Works well with . | |
Milliseconds; gives 3 digits. | |
Milliseconds; gives 2 digits. | |
Lowercase, single-character time marker string: a or p. | |
Lowercase, two-character time marker string: am or pm. | |
Uppercase, single-character time marker string: A or P. | |
Uppercase, two-character time marker string: AM or PM. | |
ISO 8601 week number of the year, e.g. 4, 42 | |
ISO 8601 week number of the year, leading zero for single-digit, e.g. 04, 42 | |
US timezone abbreviation, e.g. EST or MDT. For non-US timezones, the GMT/UTC offset is returned, e.g. GMT-0500 | |
, | Literal character sequence. Surrounding quotes are removed. |
Must be the first four characters of the mask. Converts the date from local time to UTC/GMT/Zulu time before applying the mask. The «UTC:» prefix is removed. |
Named Formats
Name | Mask | Example |
---|---|---|
Sat Jun 09 2007 17:46:21 | ||
6/9/07 | ||
06/09/2007 | ||
Jun 9, 2007 | ||
June 9, 2007 | ||
Saturday, June 9, 2007 | ||
5:46 PM | ||
5:46:21 PM | ||
5:46:21 PM EST | ||
2007-06-09 | ||
17:46:21 | ||
2007-06-09T17:46:21+0700 | ||
2007-06-09T22:46:21Z |
Localization
Day names, month names and the AM/PM indicators can be localized by
passing an object with the necessary strings. For example:
var dateFormat = require("dateformat"); dateFormat.i18n = { dayNames: "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", , monthNames: "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", , timeNames: "a", "p", "am", "pm", "A", "P", "AM", "PM", };
Breaking change in 2.1.0
- 2.1.0 was published with a breaking change, for those using localized strings.
- 2.2.0 has been published without the change, to keep packages refering to ^2.0.0 to continue working. This is now branch v2_2.
- 3.0.* contains the localized AM/PM change.
Time API
Решение 1
Сохраняю только дату. Колонка . Тип поля DTO .
Выберу на форме . От браузера придет . Jackson превратит это в для зоны и отбросит время.
В браузер вернется . Неверно.
Решение 2
Надо делать десериализацию с таймзоной сервера.
Теперь сохраняется введенная дата.
Но это не будет работать для пользователя восточнее сервера.
Решение 3
Можно пойти путем передачи зоны пользователя. Тогда надо сменить тип поля на тип с временем: .
Обратно с сервера вернется дата уже с временем . Поэтому это решение будет работать и для пользователей с запада от UTC.
Решение 4
Если формировать дату без времени на фронте, то на сервере можно оставить только поле с типом . И больше не делать дополнительных конвертаций.
Это решение работает, если даже переместить сервер в другую зону.
Чтобы предотвратить ошибку из-за передачи даты в формате ISO по времени UTC, достаточно указать формат. На дополнительные символы будет ругаться.
Решение 5
Чтобы сохранить время можно использовать . Но для конвертации строки в локальное время нужен десериалайзер с использованием . Поэтому буду использовать сразу его.
При изменении зоны сервера даты поедут.
Решение 7
Теперь можно перейти на тип колонки .
Чтобы сохранить в такую колонку, можно использовать , но обязательно сконвертировав в зону сервера. Потому что JDBC сам добавит в запрос смещение на основе зоны сервера. Postgres его учтет для конвертации в UTC.
Можно сохранять . Тогда будет передано то, что пришло из браузера.
Читать из базы драйвер позволяет только в .
Поэтому поле DTO можно сразу переделать в .
Решение 8
Для сохранение выбранного времени и отображения его независимо от зоны браузера достаточно передавать на сервер локальное время.
На сервере использовать и . Дополнительная настройка Jackson не нужна. При передаче времени с зоной он будет ругаться.