如何在复制HTML5 Datetime-local选择器值前格式化日期时间？

首先得搞明白：datetime-local输入框的value属性返回的是ISO 8601标准格式的字符串（比如2024-05-20T14:30），这和你在界面上看到的友好显示格式不一样。直接把这个原始值丢给另一个输入框，自然会显示成生硬的ISO格式，这就是格式变化的根源。

要解决这个问题，我们可以先把获取到的ISO字符串转换成Date对象，再按照你想要的格式拼接成新字符串，最后赋值给目标输入框。下面是修改后的完整代码：

修改后的jQuery实现 #

$(document).ready(function () {
  $('#dt').on('change', function () {
    // 获取datetime-local的原始ISO格式值
    const isoDateStr = $(this).val();
    if (!isoDateStr) return; // 处理未选择日期的空值情况
    
    // 将ISO字符串转为Date对象
    const date = new Date(isoDateStr);
    
    // 自定义格式化逻辑（这里以「YYYY年MM月DD日 HH:mm」为例，可按需调整）
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，要+1，补0保证两位数
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    
    const formattedDate = `${year}年${month}月${day}日 ${hours}:${minutes}`;
    
    // 把格式化后的值写入目标输入框
    $('#datetime').val(formattedDate);
  })
})

额外说明 #

• padStart(2, '0')的作用是保证月份、日期、小时、分钟都是两位数（比如1月变成01，9点变成09），避免出现单数字的不规范格式。
• 如果你需要其他格式（比如MM/DD/YYYY HH:mm或者DD-MM-YYYY HH:mm），只需要调整formattedDate的拼接顺序和分隔符就行。
• 如果你的目标输入框也是datetime-local类型，其实不需要额外格式化——直接赋值ISO格式的值，它会自动转换成界面友好的显示样式，这种情况下你可以检查下#datetime的type属性是否正确。

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