如何使用JS转换HTML中的日期格式？
[英]How to convert date format in HTML using JS?
问题描述
Really new to javascript, so really appreciate your help. 
javascript真的很新，非常感谢您的帮助。
Part of my HTML code contains dates extracted from a form, which they will be printed. 我的HTML代码的一部分包含从表单中提取的日期，这些日期将被打印出来。
<body>
Test Date<br>
<span id="test">{{TestDate|"dd/MM/yy"}}</span><br>
Test Date 2<br>
<span id="test2">{{NextTest|"dd/MM/yy"}}</span><br>
</body>
TestDate and NextTest are data obtained from a form and result displayed. TestDate和NextTest是从表单获得的数据并显示结果。 However, the date result is yyyy-MMM-dd . 但是，日期结果为yyyy-MMM-dd 。
I am trying to have it displayed as dd/MM/yy by using {{TestDate|"dd/MM/yy"}} . 我正在尝试通过使用{{TestDate|"dd/MM/yy"}}将其显示为dd/MM/yy 。 However, this doesn't seem to work. 但是，这似乎不起作用。
I have seen several options to do this using js, but I am not sure how to use this with HTML, ( tag? and how to make it execute without a trigger / upon load so both dates will be in the correct format prior to printing.) 我已经看到了几种使用js进行操作的选项，但是我不确定如何将其与HTML一起使用（标记），以及如何使其在没有触发器的情况下执行/加载后，因此两个日期在打印之前都将采用正确的格式）
Eg var now = new Date();
But not sure how to incorporate/amend this into the above HTML for the date format change to take effect as I don't need a new date, but want to use the dates returned for TestDate and NextTest. 但是由于我不需要新日期，而是要使用TestDate和NextTest返回的日期，因此不确定如何将其合并/修改到上述HTML中以使日期格式更改生效。
Or do I need to reference to span ID? 还是我需要参考跨度ID？ if so, how would that work if both dates need converting? 如果是这样，如果两个日期都需要转换怎么办？
Any help appreciated! 任何帮助表示赞赏！
Echo 回声
3 个解决方案
解决方案1
0 2018-01-08 05:25:25
Using Javascript you change using innerHTML element property. 使用Javascript，您可以使用innerHTML元素属性进行更改。 In your case you can do like this. 在您的情况下，您可以这样做。
document.getElementById('test').innerHTML=now.format("dd/MM/yy");
Hope this will help you out. 希望这对您有所帮助。
解决方案2
0 2018-01-08 05:37:18
如果您有许多日期格式要求，则此库将对moment.js有所帮助
解决方案3
0 2018-01-08 05:44:51
You can do something like below to implement the functionality. 您可以执行以下操作来实现此功能。 I have added a class customDate to all DOM elements that requires date format conversion and added the code for replacing them in the onload function. 我向所有需要日期格式转换的DOM元素添加了一个customDate类，并在onload函数中添加了替换它们的代码。
window.onload = function() { var customDates = document.getElementsByClassName('customDate'); for (var i=0; i<customDates.length; i++) { var customDate = new Date(customDates[i].innerHTML); var year = customDate.getFullYear(); var month = (customDate.getMonth()+1).toString().padStart(2, '0'); var day = customDate.getDate().toString().padStart(2, '0'); document.getElementsByClassName('customDate')[i].innerHTML = day+"/"+month+"/"+year; } }
<body> Test Date<br> <span class="customDate" id="test">2018-01-08</span><br> Test Date 2<br> <span class="customDate" id="test2">2017-12-10</span><br> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.