通过Widget将HTML文档中的ISO日期替换为正常日期

Question

我的问题如下。我使用Duda小部件生成器来构建我自己的小部件。在一个应用程序中有一个日期，默认情况下它被描述为ISO。现在转换并不太难，我尝试了以下操作：

if (document.getElementById("date") !== null) {
let date = document.getElementById("date").toString();
let dater = date.substring(0, 10);
document.getElementById("date").innerHTML.replace(date, dater);
console.log('Test');
}

<div class="Wrapper shadow">
<h3 class="date" id="date">2020-02-20T14:39:40Z</h3>
</div>

现在，它不会抛出任何错误，而是console.log"测试"。但日期仍保留在ISO中
这个小部件可以与jQuery一起使用，我相信它与此有关。写下javascript的小部件接口由以下内容封装：function(element，data，api(｛‘my js code from above’｝请帮忙。

Answer 1

这个问题是因为在处理完内容后，您永远不会更新元素的内容。还要注意，您不需要使用replace()。试试这个：

let el = document.getElementById("date");
if (el) {
el.textContent = el.textContent.substring(0, 10);
}

<div class="Wrapper shadow">
<h3 class="date" id="date">2020-02-20T14:39:40Z</h3>
</div>

也就是说，你只得到了日期字符串的前10个字符，这不是绝对正确的。如果区域设置发生更改，您的代码将中断。要解决此问题，您可以从字符串中创建一个Date对象，并输出您明确要求的格式：

let el = document.getElementById("date");
if (el) {
let date = new Date(el.textContent);
let year = date.getFullYear();
let month = ("00" + (date.getMonth() + 1)).slice(-2);
let day = ("00" + date.getDate()).slice(-2);
el.textContent = `${year}-${month}-${day}`;
}

<div class="Wrapper shadow">
<h3 class="date" id="date">2020-02-20T14:39:40Z</h3>
</div>

Answer 2

您也可以使用Moment.js来格式化所需的日期。

const el = document.querySelector('#date');
const myDateFormat = 'YYYY-MM-DD';
const date = el.textContent;
const newDate = moment(date, myDateFormat).format(myDateFormat);
el.textContent = newDate;

<script src="https://momentjs.com/downloads/moment.min.js"></script>
<div class="Wrapper shadow">
<h3 class="date" id="date">2020-02-20T14:39:40Z</h3>
</div>

希望能帮助你和其他人^^。