Как я могу отформатировать дату ISO 8601 в более читаемый формат с помощью Javascript?

Я использую API для вызова даты из сообщения.

Даты возвращаются в формате ISO 8601:

2015-11-09T10:46:15.097Z

Я хочу, чтобы мои даты были отформатированы следующим образом:

09/11/2015

Затем, позже, я хочу вставить их в свой HTML, например:

$(data).each(function(){
    var html = '<randomhtml> '+this.created_at+' <randomhtml>
    $('#stream').append(html);
});

Кто-нибудь знает, как я могу изменить дату в правильном формате?


person Bradley Jarvis    schedule 09.03.2016    source источник
comment
developer.mozilla.org/en-US/ docs / Web / JavaScript / Reference /   -  person epascarello    schedule 09.03.2016


Ответы (5)


Самый простой - просто работать со строкой

$(data).each(function(){

    var date = this.created_at.split('T') // split on the "T"   -> ["2015-11-09", "10:..."]
                              .shift()    // get the first part -> "2015-11-09"
                              .split('-') // split again on "-" -> ["2015", "11", "09"]
                              .reverse()  // reverse the array  -> ["09", "11", "2015"]
                              .join('/')  // join with "/"      -> "09/11/2015"

    var html = '<randomhtml> ' + date + ' <randomhtml>';
    $('#stream').append(html);
});

Поскольку это дата в формате UTC, простая передача ее do new Date() добавит разницу в часовом поясе и не всегда будет выводить правильную дату.
Если вам нужно проверить дату, есть регулярные выражения для проверки правильных дат в формате UTC.

person adeneo    schedule 09.03.2016
comment
Если вы объединяете методы в цепочку, можно сделать это в одном - this.created_at.split("T")[0].split("-").reverse().join("/"); - хотя было бы неплохо добавить комментарий, объясняющий, какой ввод и вывод он имеет, и, возможно, некоторую проверку ошибок, чтобы убедиться, что ввод находится в формате вы ожидаете. - person Niet the Dark Absol; 09.03.2016
comment
Вход и выход - это то, что хочет OP, поскольку оба указаны в вопросе. Я использовал две строчки, чтобы было удобнее читать. И я проверил его перед тем, как опубликовать - ›jsfiddle.net/1d5hf8sz - person adeneo; 09.03.2016
comment
Я не говорю, что ты ошибаешься. Я говорю, что код этого уровня неясности должен включать комментарии, объясняющие его работу будущим разработчикам. Проверка ошибок предназначена для того, чтобы убедиться, что формат исходных данных не изменился по сравнению с кодом в другом месте, что может привести к неожиданному поведению здесь. - person Niet the Dark Absol; 09.03.2016
comment
Для переформатирования строки требуется только один split (или match) плюс еще один оператор для форматирования. Вызов 6 методов для этого не кажется разумным. - person RobG; 10.03.2016

это может решить вашу проблему

var date = new Date('2015-11-09T10:46:15.097Z');
alert((date.getMonth() + 1) + '/' + date.getDate() + '/' +  date.getFullYear());

вывод будет «11.09.2015»

person Pankaj Monga    schedule 09.03.2016

Для работы с датой очень полезна библиотека momentjs.

Если вы хотите, чтобы формат даты зависел от страны пользователя, вы можете дополнительно использовать formatjs.

person jkordas    schedule 09.03.2016
comment
Это не ответ. - person RobG; 10.03.2016

Все браузеры

Самый надежный способ отформатировать дату в исходном формате, который вы используете, - это выполнить следующие шаги:

  1. Используйте строку времени в качестве входных данных для new Date()
  2. Используйте .getDate(), .getMonth() и .getFullYear(), чтобы получить день, месяц и год соответственно.
  3. Склейте части вместе в соответствии с вашим целевым форматом

Функция format ниже показывает оптимальный способ объединения этих четырех шагов:

var date = '2015-11-09T10:46:15.097Z';

function format(input) {
    var date = new Date(input);
    return [
       ("0" + date.getDate()).slice(-2),
       ("0" + (date.getMonth()+1)).slice(-2),
       date.getFullYear()
    ].join('/');
}

document.body.innerHTML = format(date); // OUTPUT : 09/11/2015

(См. Также эту скрипку).

Примечание

Хотя этот подход работает во всех браузерах, вам понадобится дополнительный шаг перед new Date(input) для синтаксического анализа вашего формата ISO 8601, если вам нужно поддерживать такие старые браузеры, как IE8 -. См. Принятый ответ на странице Javascript JSON Date parse в IE7 / IE8 возвращает NaN для функции, которая делает именно это.


Только современные браузеры

Вы также можете использовать встроенный .toLocaleDateString метод для форматирования за вас. Вам просто нужно указать правильный языковой стандарт и параметры, соответствующие правильному формату, который, к сожалению, поддерживается только современными браузерами (*):

var date = '2015-11-09T10:46:15.097Z';

function format(input) {
    return new Date(input).toLocaleDateString('en-GB', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
    });
}

document.body.innerHTML = format(date); // OUTPUT : 09/11/2015

(См. Также эту скрипку).


(*) Согласно MDN, современные браузеры - это Chrome 24+, Firefox 29+, IE11, Edge12 +, Opera 15+ и Safari ночная сборка

person John Slegers    schedule 09.03.2016
comment
Обычно не рекомендуется использовать конструктор Date для анализа строк (или Date.parse, они эквивалентны), поскольку он ненадежен. Даже строки, соответствующие стандарту ISO 8601, не анализируются правильно во всех используемых браузерах. - person RobG; 10.03.2016
comment
@RobG: Even ISO 8601 compliant strings are not correctly parsed by all browsers in use. - Знаете ли вы какие-либо источники, которые могут подтвердить неправильный синтаксический анализ строк даты ISO 8601? Или какие-либо особенности, на которые влияют браузеры? Кроме того, какой альтернативный подход вы бы порекомендовали? Разбирать ISO 8601 на компоненты вручную? - person John Slegers; 10.03.2016
comment
@RobG: Спасибо за отзыв. Я добавил примечание, посвященное этому. - person John Slegers; 11.03.2016

Самый простой и надежный способ переформатировать строку даты - просто переформатировать строку. Поэтому используйте split (или match), чтобы получить значения и вернуть их в нужном вам порядке, игнорируя биты, которые вам не нужны, например:

function isoToDMY(s) {
   var b = s.split(/\D/);
   return b[2] + '/' + b[1] + '/' + b[0];
}

document.write(isoToDMY('2015-11-09T10:46:15.097Z'));

Если вы хотите, чтобы дата вывода также учитывала часовой пояс хост-системы (например, 2015-11-09T20: 46: 15Z в часовом поясе UTC + 0530 будет 2015-11-10T02: 16: 15Z)), тогда вам следует вручную проанализируйте его до объекта Date, а затем получите значения года, месяца и дня.

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

person RobG    schedule 10.03.2016