javascript (jquery):
$("input").on("change", function() {
this.setAttribute(
"data-date",
moment(this.value, "YYYY-MM-DD")
.format( this.getAttribute("data-date-format") )
)
}).trigger("change")CSS:
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; /* 显示日历图标 */
}代码解释：
- HTML: <input type="date">元素用于选择日期。data-date属性用于存储格式化后的日期，data-date-format属性用于指定日期格式。
- JavaScript: 使用jQuery监听change事件，当日期改变时，使用Moment.js将日期格式化为MM/DD/YYYY，并将结果存储在data-date属性中。 trigger("change") 确保页面加载时，初始值也能正确格式化。
- CSS: input:before伪元素用于显示格式化后的日期。通过content: attr(data-date)获取data-date属性的值。 input::-webkit-datetime-edit, input::-webkit-inner-spin-button, input::-webkit-clear-button 用于隐藏原生日期输入框的文本和按钮，只保留日历图标。
注意事项
- 此方法依赖于JavaScript和CSS，因此确保用户浏览器支持这些技术。
- Moment.js是一个强大的日期处理库，可以根据需要选择其他类似的库。
- CSS样式可以根据实际需求进行调整，以达到最佳的视觉效果。
- 此方法只改变了日期输入框的显示格式，其value属性仍然是YYYY-MM-DD格式。在提交表单时，需要注意这一点，并根据需要进行转换。
- 为了更好的用户体验，可以考虑添加验证，确保用户输入的日期格式正确。
总结
虽然HTML5日期输入框本身不支持直接修改日期格式，但通过JavaScript和CSS的结合，我们可以有效地自定义其显示格式，以满足特定的需求。这种方法不仅可以实现MM/DD/YYYY格式，还可以根据需要自定义为任何其他格式。 在实际应用中，请根据项目需求和用户体验进行适当的调整和优化。
