尽管 HTML5 的 `` 元素提供了方便的日期选择功能，但其默认的日期格式往往受到浏览器和地区设置的影响，无法直接指定。为了满足特定需求，例如强制显示 MM/DD/YYYY 格式，我们需要借助一些技巧。以下是一种可行的方案，它利用 JavaScript 库 moment.js 和 CSS 来实现自定义日期格式。 首先，我们需要引入 moment.js 和 jQuery 库。 ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script><script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

接下来，创建一个 元素，并添加 data-date 和 data-date-format 属性。data-date-format 用于指定期望的日期格式，data-date 用于存储格式化后的日期字符串。

<input type="date" data-date="" data-date-format="MM/DD/YYYY" value="2023-10-27">

然后，使用 JavaScript 代码监听 input 元素的 change 事件。当日期发生变化时，使用 moment.js 将日期格式化为 data-date-format 指定的格式，并将结果更新到 data-date 属性中。

$("input").on("change", function() {
    this.setAttribute(
        "data-date",
        moment(this.value, "YYYY-MM-DD")
        .format( this.getAttribute("data-date-format") )
    )
}).trigger("change")

最后，使用 CSS 隐藏原生的日期显示，并利用 ::before 伪元素显示格式化后的日期。

input {
    position: relative;
    width: 150px; height: 20px;
    color: white; /* 隐藏原生日期文本 */
}

input:before {
    position: absolute;
    top: 3px; left: 3px;
    content: attr(data-date); /* 显示格式化后的日期 */
    display: inline-block;
    color: black;
}

input::-webkit-datetime-edit, input::-webkit-inner-spin-button, input::-webkit-clear-button {
    display: none; /* 隐藏原生日期编辑框 */
}

input::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 3px;
    right: 0;
    color: black;
    opacity: 1; /* 显示日历图标 */
}

注意事项：

JS X Monitor

X.com (Twitter) 账号监控自动化：定时抓取指定账号最新推文，发现新内容即时推送通知。

下载

• 这种方法实际上是隐藏了原生的日期显示，并用自定义的文本来模拟。因此，用户仍然可以通过日历选择器选择日期，但显示的格式是自定义的。
• 确保引入 moment.js 和 jQuery 库，否则代码将无法正常工作。
• 可以根据需要修改 CSS 样式，以适应不同的界面风格。
• 此方案依赖于 JavaScript 和 CSS，如果用户禁用了 JavaScript 或 CSS，则会显示原生的日期格式。

总结：

立即学习“前端免费学习笔记（深入）”；

虽然 HTML5 无法直接控制 元素的日期格式，但通过结合 JavaScript 和 CSS，我们可以实现自定义日期格式的目的。这种方法提供了一种灵活的方式来满足特定的需求，并提供更好的用户体验。