日期选择器（Date Picker）

最新推荐文章于 2025-06-29 10:03:46 发布

请叫我飞哥@

最新推荐文章于 2025-06-29 10:03:46 发布

阅读量3.2k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： HTML5 文章标签： html5 前端 html

本文链接：https://blog.csdn.net/qq_24459277/article/details/144758661

HTML5 专栏收录该内容

45 篇文章

订阅专栏

本文章已经生成可运行项目，

HTML5 日期选择器是一个允许用户通过图形界面选择日期的控件，使用 <input> 元素的 type 属性设置为 date。下面将详细讲解其用法、属性、样式以及示例。

HTML5 日期选择器详解

1. 基本用法

要创建一个日期选择器，只需使用以下代码：

<input type="date" id="datePicker">

2. 常用属性

value: 设置默认日期，格式为 YYYY-MM-DD。
min: 设置可选择的最小日期，格式同上。
max: 设置可选择的最大日期，格式同上。
required: 指定该输入框为必填项。
disabled: 禁用输入框，用户无法选择日期。
readonly: 输入框为只读，用户无法手动输入，但可以通过日期选择器选择。

3. 日期格式

日期选择器通常以 YYYY-MM-DD 格式显示，但浏览器会根据用户的地区设置展示相应的格式。用户可以通过日期选择器选择日期，而不是手动输入。

示例代码

以下是一个完整的 HTML5 日期选择器示例，展示了如何使用不同的属性：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 日期选择器示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        label {
            display: block;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <h1>选择日期</h1>
    <form>
        <label for="datePicker">请选择日期:</label>
        <input type="date" id="datePicker" name="datePicker" 
               min="2023-01-01" max="2024-12-31" required>
        <input type="submit" value="提交">
    </form>

    <script>
        // 获取当前日期并设置为默认值
        const dateInput = document.getElementById('datePicker');
        const today = new Date().toISOString().split('T')[0];
        dateInput.value = today;
    </script>
</body>
</html>