Как форматировать дату в JavaScript?

Рейтинг: 1Ответов: 3Опубликовано: 01.06.2023

Как конвертировать JavaScript объект Date как строку? (Предпочтительно в формате: 10-Aug-2010)

ассоциация: https://stackoverflow.com/a/34015511/21493925

javascript дата интернационализация конвертирование-даты
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Для настраиваемых форматов даты с разделителями, вам нужно взять компоненты даты (или времени) из объекта DateTimeFormat (который является частью интернационализации API ECMAScript), и потом вручную создать строку с нужными разделителями, которые вы хотите.

Чтобы сделать это, вы можете использовать DateTimeFormat#formatToParts. Вы можете деструктурировать массив, но это не идеально, так как результат зависит от локали:

{ // пример 1
   let f = new Intl.DateTimeFormat('en');
   let a = f.formatToParts();
   console.log(a);
}
{ // пример 2
   let f = new Intl.DateTimeFormat('hi');
   let a = f.formatToParts();
   console.log(a);
}

Лучше было бы применить метод map для конвертирования массива в результирующие строки:

function join(t, a, s) {
   function format(m) {
      let f = new Intl.DateTimeFormat('en', m);
      return f.format(t);
   }
   return a.map(format).join(s);
}

let a = [{day: 'numeric'}, {month: 'short'}, {year: 'numeric'}];
let s = join(new Date, a, '-');
console.log(s);

Вы также можете вытащить части объекта DateTimeFormat по одному, используя DateTimeFormat#format, но заметьте, что когда вы используете этот метод, по состоянию на март 2020 Прим. пер: этот баг может быть неактуален, есть баг в имплементации ECMAScript когда дело доходит до ведущих нулей в минутах и секундах (этот баг обходится подходом выше ).

let d = new Date(2010, 7, 5);
let ye = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(d);
let mo = new Intl.DateTimeFormat('en', { month: 'short' }).format(d);
let da = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(d);
console.log(`${da}-${mo}-${ye}`);

При работе с датами и временем обычно стоит использовать библиотеку (например, luxon, date-fns, moment.js не рекомендовано для новых проектов) из-за множества скрытых сложностей.

Обратите внимание, что API интернационализации ECMAScript, используемый в приведенных выше решениях не поддерживается в IE10 (0.03% доля мирового рынка браузеров в феврале 2020). Прим. пер: эта информация может быть устаревшей

ассоциация: https://stackoverflow.com/a/3552493/21493925

▲ 3

Date#toLocaleDateString может быть использован для создания стандартного отображения, основанного на языке. Аргументы locale и options позволяют приложениям указывать язык, чьи правила форматирования должны быть использованы, и разрешить некоторую настройку отображения.

Параметры:

  1. day:
    Представление дня.
    Возможные значения: "numeric", "2-digit".
  2. weekday:
    Представление дня недели.
    Возможные значения: "narrow", "short", "long".
  3. year:
    Представление года.
    Возможные значения: "numeric", "2-digit".
  4. month:
    Представление месяца.
    Возможные значения: "numeric", "2-digit", "narrow", "short", "long".
  5. hour:
    Представление часа.
    Возможные значения: "numeric", "2-digit".
  6. minute: Представление минуты.
    Возможные значения: "numeric", "2-digit".
  7. second:
    Представление секунды.
    Возможные значения: "numeric", 2-digit".
  8. hour12:
    Представление формата времени (12-часовое или 24-часовое).
    Принимает булевое значение (true или false)

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

Примечание: Если вы хотите настроить только параметры контента, но до сих пор используете текущую локаль, передача null первому параметру вызовет ошибку. Вместо этого используйте undefined.

Для разных языков:

  1. "en-US": Для американского английского
  2. "en-GB": Для британского английского
  3. "hi-IN": Для хинди
  4. "ja-JP": Для японского

Вы можете использовать больше параметров языка.

Для примера

var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
var today  = new Date();

console.log(today.toLocaleDateString("en-US")); // 9/17/2016
console.log(today.toLocaleDateString("en-US", options)); // Saturday, September 17, 2016
console.log(today.toLocaleDateString("hi-IN", options)); // शनिवार, 17 सितंबर 2016

Вы можете также использовать метод toLocaleString() с той же целью. Единственная разница в том, что эта функция предоставляет время, даже когда вы не передаёте никаких опций.

// Пример
9/17/2016, 1:21:34 PM

Ссылки:

ассоциация: https://stackoverflow.com/a/34015511/21493925

▲ 0

Кастомная функция форматирования:

Для фиксированных форматов простая функция будет делать всё дело. В последующем примере функция генерирует интернациональный формат ГГГГ-ММ-ДД:

function dateToYMD(date) {
    var d = date.getDate();
    var m = date.getMonth() + 1; // Месяц от 0 до 11
    var y = date.getFullYear();
    return '' + y + '-' + (m<=9 ? '0' + m : m) + '-' + (d <= 9 ? '0' + d : d);
}

console.log(dateToYMD(new Date(2017,10,5))); // Ноябрь 5

Формат, который хочет ТС, может быть сгенерирован вот так:

function dateToYMD(date) {
    var strArray = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    var d = date.getDate();
    var m = strArray[date.getMonth()];
    var y = date.getFullYear();
    return '' + (d <= 9 ? '0' + d : d) + '-' + m + '-' + y;
}
console.log(dateToYMD(new Date(2017,10,5))); // Ноябрь 5

Примечание: Однако, обычно расширять стандартные библиотеки JavaScript - плохая идея (Для примера, добавлять функции к прототипу Date).

Современные функции могут генерировать конфигурируемый результат, базируясь на параметрах формата.

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

Стандартные функции форматирования ECMAScript:

toDateString: Зависит от реализации, показывает только дату.

https://262.ecma-international.org/#sec-date.prototype.todatestring

new Date().toDateString(); // пример: "Fri Jun 02 2023"

toISOString: Отображает дату и время ISO 8601

https://262.ecma-international.org/#sec-date.prototype.toisostring

new Date().toISOString(); // пример: "2023-06-02T21:00:00.000Z"

toJSON: Конвертирует JSON в строку.

https://262.ecma-international.org/#sec-date.prototype.tojson

new Date().toJSON(); // пример: "2023-06-02T21:00:00.000Z"

toLocaleDateString: Зависит от реализации, показывает дату в локальном формате.

https://262.ecma-international.org/#sec-date.prototype.tolocaledatestring

new Date().toLocaleDateString(); // пример: "6/2/2023"

toLocaleString: Зависит от реализации, показывает дату и время в локальном формате.

https://262.ecma-international.org/#sec-date.prototype.tolocalestring

new Date().toLocaleString(); // пример: "6/2/2023, 12:00:00 AM"

toLocaleTimeString: Зависит от реализации, показывает время в локальном формате.

https://262.ecma-international.org/#sec-date.prototype.tolocaletimestring

new Date().toLocaleTimeString(); // пример: "12:00:00 AM"

toString: общий toString для Date.

https://262.ecma-international.org/#sec-date.prototype.tostring

new Date().toString() // пример: "Fri Jun 02 2023 00:00:00 GMT+0000 (Eastern European Summer Time)"

Примечание: Есть возможность генерировать собственный результат изменяя форматирование >

new Date().toISOString().slice(0,10); // возвращает ГГГГ-ММ-ДД

Сниппет с примерами:

console.log("1) "+  new Date().toDateString());
console.log("2) "+  new Date().toISOString());
console.log("3) "+  new Date().toJSON());
console.log("4) "+  new Date().toLocaleDateString());
console.log("5) "+  new Date().toLocaleString());
console.log("6) "+  new Date().toLocaleTimeString());
console.log("7) "+  new Date().toString());
console.log("8) "+  new Date().toISOString().slice(0,10));

Указывание языка для стандартных функций

Некоторые из функций перечисленных выше, могут зависеть от языка:

  • toLocaleDateString()
  • toLocaleTimeString()
  • toLocalString()

Это объясняется тем, что разные культуры имеют разные форматы и выражают свою дату и время в другом виде. По стандарту, функция возвращает формат сконфигурированный на устройстве, на котором он запущен, но это также может быть указано в аргументах (ECMA-402):

toLocaleDateString([locales[, options]])
toLocaleTimeString([locales[, options]])
toLocaleString([locales[, options]])
// пример: toLocaleDateString('ko-KR');

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

toLocaleString('en-GB', { month: 'short' })
toLocaleString('en-GB', { month: 'long' })

Примеры в сниппете:

console.log("1) "+  new Date().toLocaleString('en-US'));
console.log("2) "+  new Date().toLocaleString('ko-KR'));
console.log("3) "+  new Date().toLocaleString('de-CH'));

console.log("4) "+  new Date().toLocaleString('en-GB', { hour12: false }));
console.log("5) "+  new Date().toLocaleString('en-GB', { hour12: true }));

Вот несколько полезных практик в отношении языков:

  • Большинство людей не хотят видеть их даты в иностранном формате, следовательно, старайтесь оставлять стандартный язык во всех случаях, где это возможно (вместо того, чтобы ставить везде en-US).
  • Реализовывать переход с/на UTC может быть сложным (учитывая DST, часовой пояс не кратен 1-у часу и т.д.). Используйте хорошо протестированную библиотеку, когда это возможно.
  • Не предполагайте, что язык коррелирует со страной: несколько стран имеют много таких (Канада, Индия и т.д.)
  • Избегайте обнаружения языка нестандартными способами. Здесь вы можете прочитать о нескольких подводных камнях: определение раскладки клавиатуры, определение языка по географическому местоположению и т.д.

Ассоциация: https://stackoverflow.com/questions/3552461/43365158#43365158