如何自定义HTML日期输入框的日期格式为MM/DD/YYYY-html教程-PHP中文网

如何自定义HTML日期输入框的日期格式为MM/DD/YYYY

心靈之曲

发布： 2025-10-06 12:31:00

原创

676人浏览过

如何自定义HTML日期输入框的日期格式为MM/DD/YYYY

尽管 HTML5 的 `<input type="date">` 元素提供了方便的日期选择功能，但其默认的日期格式往往受到浏览器和地区设置的影响，无法直接指定。为了满足特定需求，例如强制显示 MM/DD/YYYY 格式，我们需要借助一些技巧。以下是一种可行的方案，它利用 JavaScript 库 moment.js 和 CSS 来实现自定义日期格式。首先，我们需要引入 moment.js 和 jQuery 库。 ```html <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>

接下来，创建一个 <input type="date"> 元素，并添加 data-date 和 data-date-format 属性。data-date-format 用于指定期望的日期格式，data-date 用于存储格式化后的日期字符串。

<input type="date" data-date="" data-date-format="MM/DD/YYYY" value="2023-10-27">

登录后复制

然后，使用 JavaScript 代码监听 input 元素的 change 事件。当日期发生变化时，使用 moment.js 将日期格式化为 data-date-format 指定的格式，并将结果更新到 data-date 属性中。

$("input").on("change", function() {
    this.setAttribute(
        "data-date",
        moment(this.value, "YYYY-MM-DD")
        .format( this.getAttribute("data-date-format") )
    )
}).trigger("change")

登录后复制

最后，使用 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; /* 显示日历图标 */
}

登录后复制

注意事项：