时间戳

首页 > 解决方案 > JQuery如何在使用Moment JS时返回正确的日期

javascript - JQuery如何在使用Moment JS时返回正确的日期

问题描述

我有一些博客文章，我想在其中显示文章的发布日期。为此，我想使用momentjs. 所以 HTML 看起来像这样

<span class="published_date" data-publish-date="2019-06-20"></span>

<span class="published_date" data-publish-date="2019-07-01"></span>

<span class="published_date" data-publish-date="2019-08-23"></span>

我的 JS 看起来像这样：

$(".published_date").each(function() {
    let publishDate = $(this).attr("data-publish-date");
    let formattedDate = moment(publishDate, "d. MMMM YYYY").format(
        "d. MMMM YYYY"
    );
    $(this).text(formattedDate);
});

这会返回错误的日期

4. June 2019
1. July 2019
5. August 2019

我不知道为什么会发生这种情况，所以有人可以帮助我吗？

标签： javascriptjquerymomentjs

解决方案

两个问题：

  1. 你已经明确地给它一个格式来解析（"d. MMMM YYYY"），但该格式与你提供的数据不匹配（"2019-06-20"等）。

  2. 格式化时，您使用的是d，而不是。D根据文档，d是星期几，而不是月份。

如果您使格式正确，它应该可以工作：

let formattedDate = moment(publishDate, "YYYY-MM-DD").format(
    "D. MMMM YYYY"
);

现场示例：

$(".published_date").each(function() {
    let publishDate = $(this).attr("data-publish-date");
    let formattedDate = moment(publishDate, "YYYY-MM-DD").format(
        "D. MMMM YYYY"
    );
    $(this).text(formattedDate);
});
<span class="published_date" data-publish-date="2019-06-20"></span>

<span class="published_date" data-publish-date="2019-07-01"></span>

<span class="published_date" data-publish-date="2019-08-23"></span>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

推荐阅读