修改HTML日期输入框默认格式为MM/DD/YYYY_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

修改HTML日期输入框默认格式为MM/DD/YYYY

2025-10-06

浏览次数：次

返回列表

修改HTML日期输入框默认格式为MM/DD/YYYY

原生HTML5日期输入框（``）在不同浏览器和地区设置下，其默认日期格式可能有所不同。虽然HTML5标准并未提供直接修改日期格式的属性，但我们可以通过一些技巧来达到自定义显示格式的目的，例如将其格式化为常见的MM/DD/YYYY。 ### 实现方法核心思路是： 1. 使用``获

取用户选择的日期，其`value`属性始终为`YYYY-MM-DD`格式。 2. 利用J*aScript库（如Moment.js）将`YYYY-MM-DD`格式的日期转换为所需的`MM/DD/YYYY`格式。 3. 使用CSS隐藏原生的日期输入框样式，并创建一个伪元素来显示格式化后的日期。 ### 代码示例以下是一个完整的示例，展示如何实现此功能： **HTML:** ```html

j*ascript (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; /* 显示日历图标 */
}

代码解释：

UXbot

AI产品设计工具

185 查看详情 UXbot

HTML: 元素用于选择日期。data-date属性用于存储格式化后的日期，data-date-format属性用于指定日期格式。
J*aScript: 使用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 用于隐藏原生日期输入框的文本和按钮，只保留日历图标。