如何在原生JavaScript中强制datetime-local输入框使用24小时制（Mac异常）

核心解决方案：利用lang属性强制区域格式 #

datetime-local输入框的显示格式默认跟随系统区域设置，但可以通过为输入框指定使用24小时制的区域语言属性，覆盖系统默认行为。

给datetime-local类型的input添加lang="en-GB"（或其他默认使用24小时制的区域，如fr-FR、de-DE），即可强制浏览器以24小时制渲染时间部分。

修改后的代码示例 #

JavaScript部分

const dateTimeString = (timestamp) => {
  return new Date(timestamp).toISOString().substring(0, 16);
};

function createElement({
  type,
  attributes = {},
  innerText
}) {
  const element = document.createElement(type);
  Object.keys(attributes).forEach((item) => {
    element.setAttribute(item, attributes[item]);
  });
  element.textContent = innerText;
  return element;
}

const extensionForContainer = document.getElementById("extension-container")
const extensionInput = createElement({
  type: 'input',
  attributes: {
    class: 'date-input hidden',
    type: 'datetime-local',
    name: 'newEndsOn',
    id: 'newEndsOn',
    value: dateTimeString(1698196920),
    lang: 'en-GB' // 添加该属性强制24小时制区域
  },
});
extensionForContainer.appendChild(extensionInput);

HTML部分

<html>
  <div id="extension-container">
  </div>
</html>

原理说明 #

浏览器渲染datetime-local输入框时，会优先读取元素自身的lang属性决定时间显示格式，而非完全依赖系统设置。en-GB这类区域默认采用24小时制，且主流浏览器（Chrome、Safari、Firefox）均支持此行为。

备选方案：自定义格式化与输入控制（纯原生） #

如果lang属性在部分老旧浏览器不生效，可采用隐藏原生输入框+自定义显示区域的方式，完全控制时间显示格式：

1. 隐藏原生的datetime-local输入框
2. 创建普通文本元素展示格式化后的24小时制时间
3. 点击文本触发原生输入框的选择器，选择后同步更新显示文本

示例代码片段：

// 创建用于显示时间的文本元素
const displayElement = createElement({
  type: 'span',
  innerText: new Date(1698196920).toLocaleString('en-GB', {hour12: false})
});
extensionForContainer.appendChild(displayElement);

// 点击显示框打开原生时间选择器
displayElement.addEventListener('click', () => {
  extensionInput.click();
});

// 选择时间后更新显示文本
extensionInput.addEventListener('change', () => {
  if (extensionInput.value) {
    const date = new Date(extensionInput.value);
    displayElement.innerText = date.toLocaleString('en-GB', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      hour12: false
    });
  }
});

这种方式完全由开发者控制显示格式，不受系统和浏览器默认设置影响，属于纯原生实现。

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