2. 引入 moment.js 和 jquery
为了方便日期格式化和 DOM 操作，我们需要引入 Moment.js 和 jQuery 库。
3. JavaScript 代码
使用 JavaScript 监听 input 元素的 change 事件，并在事件处理函数中使用 Moment.js 格式化日期，然后将格式化后的日期存储到 data-date 属性中。
$("input").on("change", function() {
this.setAttribute(
"data-date",
moment(this.value, "YYYY-MM-DD")
.format( this.getAttribute("data-date-format") )
)
}).trigger("change")4. CSS 样式
立即学习“前端免费学习笔记（深入）”；
使用 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; /* 显示日历图标 */
}完整示例代码
Custom Date Format
注意事项
- 兼容性: 这种方法依赖于 CSS 伪元素和 JavaScript，可能在一些旧版本的浏览器上存在兼容性问题。
- Moment.js: Moment.js 是一个功能强大的日期处理库，但也相对较大。如果对性能有较高要求，可以考虑使用更轻量级的日期处理库。
- 用户体验: 虽然这种方法可以实现自定义日期格式的显示，但用户仍然可以通过日期选择器选择日期。 确保用户能够理解和接受这种自定义的日期格式。
总结
虽然 HTML 原生的 元素不支持直接自定义日期格式，但通过结合 CSS 和 JavaScript，我们可以模拟出期望的显示效果。 这种方法需要在兼容性、性能和用户体验之间进行权衡，并根据实际需求进行选择。
