CSS 有没有办法更改 input type=”date” 的格式

在本文中，我们将介绍如何更改 input type=”date” 的格式。input type=”date” 是一个 HTML 元素，它允许用户选择日期。然而，默认情况下，这个输入框的格式是根据用户所在地区的设定来显示的，而且没有提供一种简单的方式来更改它的样式。然而，我们可以通过一些 CSS 技巧来实现自定义的日期格式。

阅读更多：CSS 教程

使用 JavaScript 来更改日期格式

如果我们希望完全控制日期输入框的格式，我们可以使用 JavaScript 来实现。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
    <title>修改 input type="date" 格式</title>
    <style>
        /* 隐藏默认的日期选择框 */
        input[type="date"]::-webkit-calendar-picker-indicator {
            display: none;
        }
    </style>
    <script>
        window.addEventListener("DOMContentLoaded", function() {
            var dateInput = document.getElementById("dateInput");
            dateInput.addEventListener("change", function() {
                // 将日期格式化为年-月-日
                var date = new Date(this.value);
                var formattedDate = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
                this.value = formattedDate;
            });
        });
    </script>
</head>
<body>
    <input type="date" id="dateInput">
</body>
</html>

在上面的示例中，我们首先使用 CSS 将默认的日期选择框隐藏了起来。然后使用 JavaScript 来监听日期输入框的 change 事件，将用户选择的日期格式化为我们想要的形式，然后将新的日期值重新赋值给输入框。这样，我们就可以自定义日期输入框的格式。

使用第三方库来更改日期格式

除了使用 JavaScript 自定义日期格式外，我们还可以使用一些第三方库来实现这个功能。例如，可以使用 Bootstrap Datepicker 插件。这个插件提供了丰富的配置选项，允许我们更改日期输入框的样式和格式。以下是一个使用 Bootstrap Datepicker 插件的示例：

<!DOCTYPE html>
<html>
<head>
    <title>修改 input type="date" 格式</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
</head>
<body>
    <input type="text" id="datepicker">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
    <script>
        (document).ready(function() {("#datepicker").datepicker({
                format: "yyyy-mm-dd"
            });
        });
    </script>
</body>
</html>