通过小部件将 ISO-Date 替换为 HTML 文档中的正常日期

Question

我的问题如下。 我使用 Duda 小部件生成器来构建我自己的小部件。 在一个应用程序中有一个 Date ，默认情况下它被描述为 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.logs 中记录“测试”。 但日期保持在 ISO 中。
该小部件可与 jQuery 一起使用，我相信它与此有关。 你写javascript的widget界面是这样封装的： 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>

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