如何使用 Javascript 将 ISO 8601 日期格式化为更易读的格式

How can I format an ISO 8601 date to a more readable format, using Javascript?

本文关键字：易读 格式 格式化 日期 Javascript 何使用 ISO 8601      更新时间：2023-09-26

我正在使用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);
});

有谁知道如何将我的日期更改为正确的格式？

最简单的方法是只使用字符串

$(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 日期。

这可以解决您的问题

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

输出将为"09/11/2015"

对于日期操作，momentjs 库非常有用。

如果要使日期格式依赖于用户国家/地区，则可以另外使用formatjs。

所有浏览器

使用您正在使用的源格式设置日期格式的最可靠方法是应用以下步骤：

  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

（另见这首小提琴）。

注意

虽然此方法适用于所有浏览器，但如果您需要支持与 IE8 一样旧的浏览器，则需要在new Date(input)解析 ISO 8601 格式之前执行额外的步骤--.请参阅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每晚构建

重新格式化日期字符串的最简单、最可靠的方法是重新格式化字符串。因此，使用 split（或匹配）来获取值并按您想要的顺序返回它们，忽略您不需要的位，例如：

function isoToDMY(s) {
   var b = s.split(/'D/);
   return b[2] + '/' + b[1] + '/' + b[0];
}
document.write(isoToDMY('2015-11-09T10:46:15.097Z'));

如果您希望输出日期也考虑主机系统时区（例如，UTC+0530 时区中的 2015-11-09T20：46：15Z 将是 2015-11-10T02：16：15Z）），则应手动将其解析为 Date 对象，然后获取年、月和日值。

库可以帮助解析，但解析和验证值的函数只有几行。

相关文章：