这里，data-date-format属性指定了我们期望的日期格式。value属性的值必须是yyyy-mm-dd格式，这是html日期输入框的标准格式。
2. 引入依赖库
首先，需要在HTML文件中引入jQuery和moment.js库。
<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>
3. CSS样式
使用CSS来隐藏原生日期输入框的样式，并创建一个伪元素来显示格式化后的日期。
立即学习“前端免费学习笔记（深入）”；
input {
position: relative;
width: 150px;
height: 20px;
color: white; /* 隐藏原生文字颜色 */
}
input:before {
position: absolute;
top: 3px;
left: 3px;
content: attr(data-date); /* 显示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; /* 显示日历图标 */
}4. JavaScript代码
使用JavaScript监听input事件，并使用moment.js格式化日期。
$("input").on("change", function() {
this.setAttribute(
"data-date",
moment(this.value, "YYYY-MM-DD").format( this.getAttribute("data-date-format") )
)
}).trigger("change");这段代码的含义是：
- 当日期输入框的值发生改变时（change事件），
- 使用moment(this.value, "YYYY-MM-DD")将当前日期输入框的值（this.value，格式为YYYY-MM-DD）转换为moment对象。
- 然后，使用.format( this.getAttribute("data-date-format") )将moment对象格式化为data-date-format属性指定的格式。
- 最后，使用this.setAttribute("data-date", ...)将格式化后的日期字符串设置为data-date属性的值。
- .trigger("change")：在页面加载时，手动触发一次change事件，以便初始化data-date属性的值。
完整示例代码
<!DOCTYPE html>
<html>
<head>
<title>Date Input Format</title>
<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>
<style>
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;
}
</style>
</head>
<body>
<input type="date" data-date="" data-date-format="MM/DD/YYYY" value="2023-10-27">
<script>
$("input").on("change", function() {
this.setAttribute(
"data-date",
moment(this.value, "YYYY-MM-DD").format( this.getAttribute("data-date-format") )
)
}).trigger("change");
</script>
</body>
</html>注意事项
- moment.js库: 确保正确引入moment.js库，否则日期格式化将无法正常工作。
- 初始值: value属性的值必须是YYYY-MM-DD格式，这是HTML日期输入框的标准格式。如果初始值不符合该格式，可能导致显示异常。
- 浏览器兼容性: 这种方法依赖于CSS伪元素和一些webkit特定的样式，因此可能在不同的浏览器上表现有所差异。建议进行充分的测试。
- 用户体验: 虽然这种方法可以模拟所需的日期格式，但它实际上并没有改变日期输入框的底层数据格式。用户仍然可以通过日期选择器选择日期，并且选择的日期仍然以YYYY-MM-DD格式存储。
总结
通过结合CSS和JavaScript，我们可以模拟一个具有自定义格式的日期输入框，从而满足特定的需求。虽然这种方法有一定的局限性，但它提供了一种在无法直接修改原生日期输入框格式的情况下，实现自定义日期格式的有效途径。需要注意的是，这种方法主要是在视觉上模拟日期格式，并没有改变日期输入框的底层数据格式。
