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

Question

Я использую 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);
});

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

Answer 1

Проще всего было бы просто работать со строкой

$(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, просто передать new Date() добавил бы разницу часового пояса и не всегда вывел бы правильную дату.
Если вам нужно проверить дату, существуют регулярные выражения для проверки действительных дат UTC.

Answer 2

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

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

выход будет "11.09.2015"

Answer 3

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

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

Answer 4

Все браузеры

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

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. Анализ даты в 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.

Answer 5

Самый простой и надежный способ переформатировать строку даты - просто переформатировать строку. Поэтому используйте 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 и затем получите значения года, месяца и дня.

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