在日常开发过程中或者日常工作中,经常会用到日期格式的转换,比js日志格式转换为字符串格式或者js字符串格式转为日期格式。
废话不多说直接上图上代码。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>js时间格式转换</title> <style type="text/css"> .time-text { width: 220px; height: 26px; } .format-time { margin-top: 20px; } </style> </head> <body> <div> <div> <h3>时间格式格式转字符时间</h3> </div> <div> 原来时间:<input type="text" id="source-time"> 例如:2024-01-01 08:08:08 </div> <div> 目标时间:<input type="text" id="target-time"> 例如:2024年1月1号8点8分8秒 </div> <div> <h3>字符串时间转日期格式时间</h3> </div> <div> 原来时间:<input type="text" id="source-time2"> 例如:2024年1月1号8点8分8秒 </div> <div> 目标时间:<input type="text" id="target-time2"> 例如:2024-01-01 08:08:08 </div> </div> <script type="text/javascript"> let sourceTimeElement = document.getElementById('source-time'); let targetDateElement = document.getElementById('target-time'); sourceTimeElement.onblur = function () { let sourceTime = sourceTimeElement.value.trim(); console.log(sourceTime, isDate(sourceTime)); if (!isDate(sourceTime)) { sourceTimeElement.style.cssText = "border:2px solid red;"; return; } sourceTimeElement.style.cssText = ""; let targetDate = formatDateTime(new Date(sourceTime)); targetDateElement.value = targetDate; targetDateElement.select(); } let sourceTimeElement2 = document.getElementById('source-time2'); let targetDateElement2 = document.getElementById('target-time2'); sourceTimeElement2.onblur = function () { let sourceTime2 = removeSpaces(sourceTimeElement2.value.trim()); let parts = sourceTime2.split(/[年 月 日|号 时|点 分 秒]/); let [year, month, day, hour, minute, second] = parts; console.log(sourceTime2, parts) let newDate = new Date(year, month - 1, day, hour, minute, second); if (!isDate(newDate)) { sourceTimeElement2.style.cssText = "border:2px solid red;"; return; } sourceTimeElement2.style.cssText = ""; let targetDate2 = formatDateTime2(newDate); targetDateElement2.value = targetDate2; targetDateElement2.select(); } function padZero(num) { return num < 10 ? '0' + num : num; } function formatDateTime(date) { // 月份、分钟和秒钟可能需要前补零 var year = date.getFullYear(); // 月份是从0开始的 var month = date.getMonth() + 1; var day = date.getDate(); var hours = date.getHours(); var minutes = date.getMinutes(); var seconds = date.getSeconds(); return year + '年' + month + '月' + day + '日' + hours + '时' + minutes + '分' + seconds + '秒'; } function formatDateTime2(date) { // 月份、分钟和秒钟可能需要前补零 var year = date.getFullYear(); // 月份是从0开始的 var month = padZero(date.getMonth() + 1); var day = padZero(date.getDate()); var hours = padZero(date.getHours()); var minutes = padZero(date.getMinutes()); var seconds = padZero(date.getSeconds()); return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds; } function isDate(str) { let date = new Date(str); return date instanceof Date && !isNaN(date); } function removeSpaces(str) { return str.replace(/\s+/g, ''); } </script> </body> </html>