研究了兩天javascript日期相關的內容，一句話總結：“瀏覽器可以用上十萬年，因為javascript支持的時間范圍就是這么長”。
通過實驗來看，比較好用的是type="date",及type="datetime-local"
關於設置值的結論：
(1)2020-03-26格式可用於date、datetime
(2)2020-03-26 22:32:07格式僅可以用於datetime
(3)2020-03-26T22:33:03格式可以用於datetime、datetime-local
關於輸入及校驗日期的正確性：能輸入不代表就能正確轉換成日期
代碼：沒寫過WEB程序，算是個練習，將就着看吧。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <style type="text/css"> table.gridtable { font-family: verdana,arial,sans-serif; font-size: 11px; color: #333333; border-width: 1px; border-color: #666666; border-collapse: collapse; } table.gridtable th { border-width: 1px; padding: 8px; border-style: solid; border-color: #666666; background-color: #dedede; text-align: center; } table.gridtable td { border-width: 1px; padding: 8px; border-style: solid; border-color: #666666; background-color: #ffffff; } </style> <script src='assets/js/jquery-2.0.3.min.js'></script> <br /> <script type="text/javascript"> function FormatDate() { //var current = new Date(); var now = new Date(); var year = now.getFullYear(); //month返回數組（0-11） var month = ("0" + (now.getMonth() + 1)).slice(-2); //getDate返回日期(1-31) var day = ("0" + now.getDate()).slice(-2); var formatedDate = year + "-" + month + "-" + day; //alert("系統時間:" + now + "\n格式化時間：" + formatedDate); return formatedDate; } function FormatDate1() { //var current = new Date(); var now = new Date(); var year = now.getFullYear(); //month返回數組（0-11） var month = ("0" + (now.getMonth() + 1)).slice(-2); //getDate返回日期(1-31) var day = ("0" + now.getDate()).slice(-2); var formatedDate = year + "/" + month + "/" + day; //alert("系統時間:" + now + "\n格式化時間：" + formatedDate); return formatedDate; } function FormatDateTime() { //var current = new Date(); var now = new Date(); var year = now.getFullYear(); //month返回數組（0-11） var month = ("0" + (now.getMonth() + 1)).slice(-2); //getDate返回日期(1-31) var day = ("0" + now.getDate()).slice(-2); // var hour = ("0" + now.getHours()).slice(-2); var minute = ":" + ("0" + now.getMinutes()).slice(-2); var second = ":" + ("0" + now.getSeconds()).slice(-2); var formatedDate = year + "-" + month + "-" + day + " " + hour + minute + second; //alert("系統時間:" + now + "\n格式化時間：" + formatedDate); return formatedDate; } function FormatDateTimeLocal() { //var current = new Date(); var now = new Date(); var year = now.getFullYear(); //month返回數組（0-11） var month = ("0" + (now.getMonth() + 1)).slice(-2); //getDate返回日期(1-31) var day = ("0" + now.getDate()).slice(-2); // var hour = ("0" + now.getHours()).slice(-2); var minute = ":" + ("0" + now.getMinutes()).slice(-2); var second = ":" + ("0" + now.getSeconds()).slice(-2); var formatedDate = year + "-" + month + "-" + day + "T" + hour + minute + second; return formatedDate; } </script> <table class="gridtable"> <thead> <tr> <th>input標簽type</th> <th width="255px">input標簽</th> <th width="155px">輸入格式</th> <th>測試</th> </tr> </thead> <tr> <td> input type="date" </td> <td> <input type="date" id="mydate00001" value="2001-01-01" /> </td> <td> <label id="lb00001"></label> </td> <td> <input type="button" onclick="setDate1()" value="設置時間(格式1)" /> </td> </tr> <tr> <td> input type="datetime" </td> <td> <input type="datetime" id="mydate00002" value="2002-01-01" /> </td> <td> <label id="lb00002"></label> </td> <td> <input type="button" onclick="setDate2()" value="設置時間（格式2）" /> </td> </tr> <tr> <td> input type="datetime-local" </td> <td> <input type="datetime-local" id="mydate00003" value="2003-01-01T00:00:00" /> </td> <td> <label id="lb00003"></label> </td> <td> <input type="button" onclick="setDate3()" value="設置時間（格式3）" /> </td> </tr> </table> <br /> <!--jquery中attr和prop的區別介紹： •對於HTML元素本身就帶有的固有屬性，在處理時，使用prop方法。 •對於HTML元素我們自己自定義的DOM屬性，在處理時，使用attr方法。--> <script type="text/javascript"> function setDate1() { var str = FormatDate(); $("#lb00001").prop("innerHTML", str); $('#mydate00001').prop('value',str ); $('#mydate00002').prop('value', str); $('#mydate00003').prop('value', str) } function setDate2() { var str = FormatDateTime(); $("#lb00002").prop("innerHTML", str); $('#mydate00001').prop('value', str); $('#mydate00002').prop('value', str); $('#mydate00003').prop('value', str); } function setDate3() { var str = FormatDateTimeLocal(); $("#lb00003").prop("innerHTML", str); $('#mydate00001').prop('value',str); $('#mydate00002').prop('value', str); $('#mydate00003').prop('value', str); } </script> <br /> <hr /> <script type="text/javascript"> function dateTest() { var result=""; $("input[type='date']") .each(function () { var v = new Date($(this).val()); result += "\ndate取值:" + $(this).val() + "\n日期時間轉換后的值:" + v } ); $("input[type='datetime']") .each(function () { var v = new Date($(this).val()); result += "\ndatetime取值:" + $(this).val() + "\n日期時間轉換后的值:" + v } ); $("input[type='datetime-local']") .each(function () { var v = new Date($(this).val()); result += "\ndatetime-local取值:" + $(this).val() + "\n日期時間轉換后的值:" + v } ); alert(result); }; </script> <input type="button" onclick="dateTest()" value="校驗日期" /> </body> </html>