修改HTML日期输入框默认格式为MM/DD/YYYY-html教程-PHP中文网

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

花韻仙語

发布： 2025-10-06 11:56:31

原创

872人浏览过

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

原生HTML5日期输入框（`<input type="date">`）在不同浏览器和地区设置下，其默认日期格式可能有所不同。虽然HTML5标准并未提供直接修改日期格式的属性，但我们可以通过一些技巧来达到自定义显示格式的目的，例如将其格式化为常见的MM/DD/YYYY。 ### 实现方法核心思路是： 1. 使用`<input type="date">`获取用户选择的日期，其`value`属性始终为`YYYY-MM-DD`格式。 2. 利用JavaScript库（如Moment.js）将`YYYY-MM-DD`格式的日期转换为所需的`MM/DD/YYYY`格式。 3. 使用CSS隐藏原生的日期输入框样式，并创建一个伪元素来显示格式化后的日期。 ### 代码示例以下是一个完整的示例，展示如何实现此功能： **HTML:** ```html <input type="date" data-date="" data-date-format="MM/DD/YYYY" value="2023-10-27"> <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>

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

登录后复制

代码解释：

图改改

在线修改图片文字

455

查看详情

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 用于隐藏原生日期输入框的文本和按钮，只保留日历图标。