如何将输入框中的日期字符串转换为'dd-MM-yyyy'格式？

核心思路 #

先获取输入框内的原始日期字符串，将其解析为Date对象后，提取日、月、年并按dd-MM-yyyy格式拼接，最后把格式化后的字符串重新赋值给输入框。

原生JavaScript实现代码 #

// 获取输入框元素
const dateInput = document.getElementById('orderDateInput');
// 读取原始日期字符串
const originalDateStr = dateInput.value;
// 解析为Date对象（原格式MM/dd/yyyy hh:mm:ss AM/PM可被直接识别）
const dateObj = new Date(originalDateStr);

// 补零处理，确保日、月为两位数字
const day = String(dateObj.getDate()).padStart(2, '0');
const month = String(dateObj.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需加1
const year = dateObj.getFullYear();

// 拼接成目标格式
const formattedDate = `${day}-${month}-${year}`;
// 更新输入框值
dateInput.value = formattedDate;

兼容性备用方案（手动解析日期） #

若部分浏览器对原日期格式解析有问题，可手动拆分字符串解析：

const dateInput = document.getElementById('orderDateInput');
const originalDateStr = dateInput.value;
// 拆分出日期部分（忽略时间）
const dateParts = originalDateStr.split(' ')[0].split('/');
// 原格式是MM/dd/yyyy，对应parts[0]月、parts[1]日、parts[2]年
const dateObj = new Date(dateParts[2], dateParts[0] - 1, dateParts[1]);

const day = String(dateObj.getDate()).padStart(2, '0');
const month = String(dateObj.getMonth() + 1).padStart(2, '0');
const year = dateObj.getFullYear();

dateInput.value = `${day}-${month}-${year}`;

运行时机选择 #

你可以把代码放在以下场景触发：

• 页面加载完成时：通过DOMContentLoaded事件自动执行
• 用户操作后：比如按钮点击、输入框失去焦点（blur事件）

示例：页面加载完成自动转换

document.addEventListener('DOMContentLoaded', function() {
  const dateInput = document.getElementById('orderDateInput');
  const originalDateStr = dateInput.value;
  const dateObj = new Date(originalDateStr);
  
  const day = String(dateObj.getDate()).padStart(2, '0');
  const month = String(dateObj.getMonth() + 1).padStart(2, '0');
  const year = dateObj.getFullYear();
  
  dateInput.value = `${day}-${month}-${year}`;
});

内容的提问来源于stack exchange，提问作者James123