在日常开发过程中或者日常工作中，经常会用到日期格式的转换，比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>