如何移除HTML datetime-local输入返回值中的"T"分隔符

该需求可完全通过原生JavaScript实现，无需依赖任何第三方类库，以下是几种常用实现方案：

方案1：直接字符串替换（最简便，无兼容性问题） #

datetime-local输入框的返回值固定为YYYY-MM-DDTHH:mm的标准ISO格式，直接将字符T替换为空格即可得到目标格式，不会出现时区偏差问题，性能最优。
代码示例：

// 取值时直接处理
const dateInput = document.getElementById('date');
const targetTime = dateInput.value.replace('T', ' ');

// 输出示例：2021-11-08 16:34
console.log(targetTime);

方案2：表单提交时自动处理 #

如果需要在表单提交时自动转换格式，无需单独手动取值，可监听表单的submit事件进行处理：

<form id="submitForm">
  <input type="datetime-local" id="date" name="date">
  <button type="submit">提交</button>
</form>

const form = document.getElementById('submitForm');
const dateInput = document.getElementById('date');

form.addEventListener('submit', (e) => {
  // 若不需要阻止默认提交可删除该行
  e.preventDefault();
  
  if (dateInput.value) {
    dateInput.value = dateInput.value.replace('T', ' ');
  }
  
  // 此处可执行提交逻辑，比如AJAX请求或原生表单提交
  console.log('提交的时间值：', dateInput.value);
  // 原生提交表单可执行：form.submit()
})

方案3：通过Date对象处理（适配需要额外时间操作的场景） #

如果后续需要对时间做加减、格式扩展等操作，可通过Date实例处理，注意该方法会受浏览器本地时区影响：

const rawTime = document.getElementById('date').value;
const timeInstance = new Date(rawTime);

// 补零处理后拼接为目标格式
const targetTime = `${timeInstance.getFullYear()}-${
  String(timeInstance.getMonth() + 1).padStart(2, '0')
}-${
  String(timeInstance.getDate()).padStart(2, '0')
} ${
  String(timeInstance.getHours()).padStart(2, '0')
}:${
  String(timeInstance.getMinutes()).padStart(2, '0')
}`;

注意事项 #

datetime-local输入框仅支持标准带T的ISO格式赋值，如果需要将处理后的时间回显到输入框，需要将空格换回T再赋值，否则会出现赋值失效的问题。

内容的提问来源于stack exchange，提问作者Gonçalo Sousa