HTML Date Input 格式化为 MM/DD/YYYY 的实现方法-html教程-PHP中文网

HTML Date Input 格式化为 MM/DD/YYYY 的实现方法

霞舞

发布： 2025-10-06 13:58:18

原创

716人浏览过

HTML Date Input 格式化为 MM/DD/YYYY 的实现方法

HTML 原生的 `<input type="date">` 元素在格式化方面存在局限性，无法直接修改其默认的日期格式。然而，通过结合 CSS 和 JavaScript，我们可以模拟出期望的 MM/DD/YYYY 显示效果，同时保留日期选择器的功能。本文将介绍如何利用 JavaScript 库 Moment.js 和一些 CSS 技巧，来实现自定义日期格式的输入框。 ### 使用 JavaScript 和 CSS 自定义日期格式由于 HTML5 的 `<input type="date">` 元素本身并不支持自定义日期格式，我们需要采用一种变通的方法来实现 MM/DD/YYYY 的显示效果。基本思路是： 1. 使用 `<input type="date">` 获取用户选择的日期。 2. 使用 JavaScript 监听 `change` 事件，当日期发生改变时，使用 Moment.js 将日期格式化为 MM/DD/YYYY。 3. 使用 CSS 隐藏原生的日期显示，并使用伪元素 `:before` 显示格式化后的日期。 ### 具体实现步骤 **1. HTML 结构** 首先，在 HTML 中添加一个 `<input type="date">` 元素，并设置 `data-date` 和 `data-date-format` 属性，用于存储格式化后的日期和日期格式。 ```html <input type="date" data-date="" data-date-format="MM/DD/YYYY" value="2023-10-27">

2. 引入 moment.js 和 jquery

为了方便日期格式化和 DOM 操作，我们需要引入 Moment.js 和 jQuery 库。

<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>

登录后复制

3. JavaScript 代码

使用 JavaScript 监听 input 元素的 change 事件，并在事件处理函数中使用 Moment.js 格式化日期，然后将格式化后的日期存储到 data-date 属性中。

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

登录后复制

4. CSS 样式

立即学习“前端免费学习笔记（深入）”；

比格设计

比格设计是135编辑器旗下一款一站式、多场景、智能化的在线图片编辑器

124

查看详情

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

登录后复制

完整示例代码

<!DOCTYPE html>
<html>
<head>
<title>Custom Date Format</title>
<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>
<style>
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; /* 显示日历图标 */
}
</style>
</head>
<body>

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

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

</body>
</html>

登录后复制