理解 datetime-local 输入与默认格式
html5 引入的 元素允许用户方便地选择日期和时间。然而，当通过 javascript 获取其 value 属性时，它会返回一个符合 iso 8601 标准的字符串，例如 2023-05-31t15:09。这种格式对于机器处理非常友好，但在用户界面中直接显示时，可能不够直观或不符合特定区域的习惯。
例如，如果您有以下 HTML 结构：
并通过 JavaScript 获取其值：
const Date = document.getElementById("date").value;
console.log(Date); // 输出示例: 2023-05-31T15:09您会发现输出的格式是固定的。为了将其转换为更易读的格式，例如 31-05-2023, 15:09，我们需要进行额外的处理。
使用 Date 对象和 toLocaleString() 进行格式化
JavaScript 提供了 Date 对象及其 toLocaleString() 方法，能够将日期时间对象转换为特定区域设置（locale）和格式选项下的字符串表示。这是实现自定义日期时间格式化的强大工具。
立即学习“Java免费学习笔记（深入）”；
核心步骤如下：
- 获取 datetime-local 的值：从输入元素中获取 ISO 格式的日期时间字符串。
- 创建 Date 对象：将获取到的字符串作为参数，创建一个新的 Date 对象。Date 构造函数能够解析 ISO 8601 格式的字符串。
- 调用 toLocaleString()：在 Date 对象上调用 toLocaleString() 方法，并传入期望的区域设置和格式选项。
示例代码
以下代码演示了如何监听 datetime-local 输入的变化，并将其值格式化为“日-月-年, 时:分”的样式：
日期时间格式化教程
选择日期和时间
格式化后的日期时间:
注意事项与最佳实践
- 变量命名冲突：避免将变量命名为 Date。Date 是 JavaScript 内置的全局对象，将其用作变量名会导致覆盖内置功能，引发难以调试的问题。在示例中，我们使用了 dateInput 和 selectedDate 等更具描述性的名称。
- 事件监听器：将格式化逻辑放在 change 事件监听器中是最佳实践。这样，每当用户选择或更改日期时间时，显示就会实时更新，提供了更好的用户体验。
-
toLocaleString() 的区域设置 (Locale)：
- "en-GB" (英国英语) 通常会生成日/月/年格式。
- "en-US" (美国英语) 通常会生成月/日/年格式。
- "zh-CN" (简体中文) 通常会生成年/月/日格式。
- 您可以根据目标用户群体选择合适的区域设置。
- toLocaleString() 的选项对象：
- 处理空值：在处理 dateInput.value 之前，最好检查它是否为空。如果用户没有选择任何值，dateInput.value 将是空字符串，new Date("") 可能会创建无效的日期对象，导致 toLocaleString() 行为异常。
总结
通过将 datetime-local 输入的 ISO 格式字符串转换为 JavaScript Date 对象，并结合 toLocaleString() 方法及其丰富的区域设置和选项，我们可以轻松地将日期时间格式化为任何用户友好的显示形式。掌握这一技巧对于开发具有良好用户体验的 Web 应用程序至关重要。始终记住遵循变量命名规范，并利用事件监听器实现动态更新。
