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

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

尽管 HTML5 的 `` 元素提供了方便的日期选择功能，但其默认的日期格式往往受到浏览器和地区设置的影响，无法直接指定。为了满足特定需求，例如强制显示 MM/DD/YYYY 格式，我们需要借助一些技巧。以下是一种可行的方案，它利用 JavaScript 库 moment.js 和 CSS 来实现自定义日期格式。首先，我们需要引入 moment.js 和 jQuery 库。 ```html <script src="https://<a%20style=" color: text-decoration:underline title="cdn" href="https://m.php.cn/zt/19618.html" target="_blank">cdnjs.cloudflare.com/<a style="color:#f60; text-decoration:underline;" title= "ajax"href="https://m.php.cn/zt/15849.html" target="_blank">ajax/libs/moment.js/2.24.0/moment.min.js"></script><script src="https://code.<a%20style=" color: text-decoration:underline title="jquery" href="https://m.php.cn/zt/15736.html" target="_blank">jquery.com/jquery-3.4.1.min.js"></script>

接下来，创建一个元素，并添加 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; /* 显示日历图标 */
}

注意事项：