接下来，创建一个 <input type="date"> 元素，并添加 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; /* 显示日历图标 */
}注意事项：
- 这种方法实际上是隐藏了原生的日期显示，并用自定义的文本来模拟。因此，用户仍然可以通过日历选择器选择日期，但显示的格式是自定义的。
- 确保引入 moment.js 和 jQuery 库，否则代码将无法正常工作。
- 可以根据需要修改 CSS 样式，以适应不同的界面风格。
- 此方案依赖于 JavaScript 和 CSS，如果用户禁用了 JavaScript 或 CSS，则会显示原生的日期格式。
总结：
立即学习“前端免费学习笔记（深入）”；
虽然 HTML5 无法直接控制 <input type="date"> 元素的日期格式，但通过结合 JavaScript 和 CSS，我们可以实现自定义日期格式的目的。这种方法提供了一种灵活的方式来满足特定的需求，并提供更好的用户体验。
