Firefox中input[type=datetime-local]失效，求解决方案或替代JS实现

一、拆分原生控件（最简方案） #

Firefox对input[type=datetime-local]的原生支持存在兼容性问题，直接拆成date和time两个原生控件组合使用即可，这两个控件在Firefox里能正常渲染，体验和datetime-local接近：

<label>选择日期时间：</label>
<input type="date" id="datePicker">
<input type="time" id="timePicker">

<script>
// 可选：把两个控件的值合并成datetime-local格式的字符串
function getFullDateTime() {
  const date = document.getElementById('datePicker').value;
  const time = document.getElementById('timePicker').value;
  return date ? `${date}T${time || '00:00'}` : '';
}

// 示例：点击按钮获取合并后的值
document.querySelector('#submitBtn')?.addEventListener('click', () => {
  console.log(getFullDateTime());
});
</script>

二、纯JS自定义单输入框选择器 #

如果需要单输入框的体验，可以用JS实现一个简单的日期时间选择功能，结合原生弹窗和格式验证：

<input type="text" id="customDtPicker" placeholder="点击选择日期时间" readonly>

<script>
const input = document.getElementById('customDtPicker');

input.addEventListener('click', () => {
  const now = new Date();
  // 预设当前日期时间作为默认值
  const defaultStr = `${now.getFullYear()}-${String(now.getMonth()+1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`;
  
  const userInput = prompt('请输入日期时间（格式：YYYY-MM-DD HH:mm）', defaultStr);
  if (!userInput) return;

  // 简单格式校验
  const formatCheck = /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}$/;
  if (formatCheck.test(userInput)) {
    input.value = userInput;
    // 要是需要转成datetime-local的标准格式，把空格换成T就行
    // const dtLocalFormat = userInput.replace(' ', 'T');
  } else {
    alert('格式不对，请按要求输入');
  }
});
</script>

三、轻量第三方库方案 #

如果不想自己写逻辑，也可以用纯JS的轻量日期时间选择库，把库代码下载到本地引入就行，这类库基本都兼容Firefox，能直接实现类似datetime-local的功能。

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