HTML 日期选择器

17 Mar 2025 | 5 分钟阅读

HTML 日期选择器是一个必不可少、用户友好的输入元素，它简化了 Web 表单的选择过程。它允许用户从日历界面中选择日期，从而改善了用户体验并降低了输入错误的几率。

在本文中，我们将详细讨论HTML 日期选择器，但首先让我们讨论HTML 日期。

什么是 HTML 日期？

HTML 日期输入通常在 HTML 表单中用于输入日期。用户可以手动以文本形式输入日期，或使用浏览器内置的日期选择器小部件输入日期，但重要的是要知道并非所有浏览器都支持内置的日期选择器小部件。

语法

以上语法指定了日期输入字段。

什么是 HTML 日期选择器？

HTML 日期选择器是 HTML 日期输入的改进版本，是HTML5规范的一部分。它为用户提供了一种简便的方式来输入日期，因为他们可以从弹出式交互式图形日历界面小部件中选择日期。当用户点击下拉菜单中的特定日期时，选定的日期会自动填充到输入字段中。日期格式取决于 Web 浏览器。

语法

以上语法允许您从日历中选择日期。

您也可以创建日期选择器来选择时间。

语法

以上语法也允许您选择时间。

使用 HTML 日期选择器的优点

用户友好：日期选择器允许用户通过从弹出式日历中选择日期来输入正确的日期，这使得添加日期更加方便，并使该日期选择器小部件用户友好。它降低了手动输入日期时可能出现的输入错误风险。
移动友好：HTML 日期选择器设计用于适应不同的屏幕尺寸，这使得移动用户可以轻松输入日期。
验证：HTML 日期选择器会验证输入的日期是否符合标准化格式。它可以阻止用户输入无效日期，并减少输入错误。
可访问性：残障用户可以获得更好的体验，因为支持许多辅助技术，例如键盘导航和屏幕阅读器。
可定制性：Web 设计师可以使用CSS和JavaScript来自定义 HTML 日期选择器的行为，这些都很容易实现。
跨平台兼容性：HTML 日期选择器得到各种 Web 浏览器的支持，例如iOS、Windows、macOS和Android。

HTML 日期选择器的属性

HTML 日期选择器包含 <input> 元素支持的属性，如下所示：

1. Min 属性：此属性设置最小日期范围，以将选择限制在特定范围内。

语法

2. Max 属性：此属性用于设置最大日期范围，以将选择限制在特定范围内。

语法

3. Step：此属性用于设置步长值，这意味着日期选择器将允许用户在您设置的步数后选择一个日期。

4. Required：此属性用于使日期输入成为必填项。

5. Value：此属性用默认日期预填充输入字段。

HTML 日期选择器示例

我们将通过示例来正确理解 HTML 日期选择器。

示例 1

在此示例中，我们将创建一个 HTML 日期选择器。

代码

<!DOCTYPE html>
<html>
<head>
    <title>Example 1 of the HTML Date Picker</title>
</head>
<body>
    <h1>Example-1 of the HTML Date Picker</h1>
    <h2>Select a Date</h2>
    <label for="date">Choose a date:</label>
    <input type="date" id="date" name="date">
</body>
</html>

输出

您可以看到 HTML 日期选择器，它允许您从日历中选择日、月和年。

示例 2

在此示例中，我们将创建一个带有“min”属性的 HTML 日期选择器。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example-2 of the HTML Date Picker</title>
</head>
<body>
    <h1>Example-2 of the HTML Date Picker with "min" attribute</h1>
    <h2>Enter your date of birth</h2>
            <label for="DOB">DOB:</label>
            <input type="date" id="dob" name="dob" min="1990-10-05">
</body>
</html>

输出

您可以在下方看到，您可以从日历中选择的最小日期是“1990-10-05”。

示例 3

在此示例中，我们将创建一个带有“max”属性的 HTML 日期选择器。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example-3 of the HTML Date Picker</title>
</head>
<body>
    <h1>Example-3 of the HTML Date Picker with "max" attribute</h1>
    <h2>Enter your date of birth</h2>
            <label for="DOB">DOB:</label>
            <input type="date" id="dob" name="dob" max="2020-11-01">
</body>
</html>

输出

您可以在下方看到，您可以从日历中选择的最大日期是“2020-11-01”。

示例 4

在此示例中，我们将创建一个带有“step”属性的 HTML 日期选择器。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example-4 of the HTML Date Picker</title>
</head>
<body>
    <h1>Example-4 of the HTML Date Picker with "step" attribute</h1>
    <h2>Select an appointment date (weekly intervals)</h2>
    <form>
        <fieldset>
            <legend>Appointment</legend>
        <label for="date">Date:</label>
        <input type="date" id="date" name="date" step="7"> <br>
    </fieldset>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

输出

您可以在下方看到，每周间隔的步长属性设置为“7”，这样您就可以从日历中选择每周的第七天。

示例 5

在此示例中，我们将创建一个带有“required”属性的 HTML 日期选择器。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example-5 of the HTML Date Picker</title>
</head>
<body>
    <h1>Example-5 of the HTML Date Picker with "required" attribute</h1>
    <h2>Enter your date of birth</h2>
           <form>
            <label for="DOB">DOB:</label>
            <input type="date" id="dob" name="dob" required> <br><br>
            <input type="submit" value="Submit">
        </form>
</body>
</html>

输出

您可以在下方看到，选择日期是强制性的；否则，您将看到一个弹出消息，提示“Please fill out this field”（请填写此字段）。

示例 6

在此示例中，我们将创建一个带有“value”属性的 HTML 日期选择器。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example-6 of the HTML Date Picker</title>
</head>
<body>
    <h1>Example-6 of the HTML Date Picker with "value" attribute</h1>
    <form>
        <label for="DOB">DOB:</label>
        <input type="date" id="dob" name="dob" required value="2023-10-01"> <br><br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

输出

在下方，日期已预设为“2023-10-01”。

示例 7

我们将创建一个同时包含时间的 HTML 日期选择器。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example-7 of the HTML Date Picker</title>
</head>
<body>
    <h1>Example-7 of the HTML Date Picker with time as well</h1>
    <form>
        <label for="DOB">DOB:</label>
        <input type="datetime-local" id="dob" name="dob"> <br><br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

输出

您可以在下方看到，您可以从日历中选择日期并输入时间。

浏览器兼容性

以下是支持 HTML 日期选择器的浏览器：

谷歌浏览器
火狐
Safari
Microsoft Edge

结论

在本文中，您已经了解了HTML 日期选择器，它用于添加用户可以从日历中选择日期并轻松自动输入日期的功能。

您已经通过示例了解了可用于为日期添加额外功能的输入属性。

下一个主题HTML Email

← 上一个下一个 →

HTML 日期选择器

什么是 HTML 日期？

语法

什么是 HTML 日期选择器？

语法

语法

使用 HTML 日期选择器的优点

HTML 日期选择器的属性

HTML 日期选择器示例

示例 1

示例 2

示例 3

示例 4

示例 5

示例 6

示例 7

浏览器兼容性

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

HTML 日期选择器

什么是 HTML 日期？

语法

什么是 HTML 日期选择器？

语法

语法

使用 HTML 日期选择器的优点

HTML 日期选择器的属性

HTML 日期选择器示例

示例 1

示例 2

示例 3

示例 4

示例 5

示例 6

示例 7

浏览器兼容性

结论

相关帖子

如何在 HTML 中添加边框

HTML Localhost Index

IFrame Onload 事件

HTML 视频海报

如何在 HTML 中实现复制到剪贴板

如何在 HTML 中添加背景图片

如何在 HTML 中突出显示文本

HTML 中的结束标签包含

如何使用 Brackets.io 创建简单的网页？（适合初学者）

HTML P 标签

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器