📜  HTML | DOM 输入日期最大值属性(1)

📅  最后修改于: 2023-12-03 15:15:37.826000             🧑  作者: Mango

HTML | DOM 输入日期最大值属性

简介

HTML | DOM 输入日期最大值属性是用于设置指定日期输入框的最大可选日期的属性。它可以使用户在选择日期时只能选择当前日期之前的日期。

该属性可应用于 <input> 元素中的 type="date" 类型输入框。

在现代浏览器中,该属性可以使用 JavaScript 进行动态设置。这使得我们能够根据具体需求,在用户输入时动态地调整可选日期范围。

语法

HTML | DOM 输入日期最大值属性的语法格式为:

<input type="date" max="yyyy-mm-dd">

其中,max 属性定义了输入框的最大可选日期。它应为一个日期字符串,包括以下三个部分:

  • yyyy: 四位数的年份;

  • mm: 两位数的月份;

  • dd: 两位数的日期。

例如:

<input type="date" max="2022-12-31">

该输入框只能选择 2022 年 12 月 31 日或之前的日期。

示例

以下示例演示了如何在 HTML 中使用 max 属性:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML | DOM 输入日期最大值属性 示例</title>
</head>
<body>
    <input type="date" max="2022-12-31">
</body>
</html>

请注意,上述示例只会在支持 HTML5 标准的浏览器中有效。

动态设置

我们可以使用 JavaScript 动态地设置 max 属性。示例如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML | DOM 输入日期最大值属性 示例</title>
</head>
<body>
    <input type="date" id="myDateInput">
    <script>
        var today = new Date().toISOString().split('T')[0];
        document.getElementById("myDateInput").max = today;
    </script>
</body>
</html>

上述示例会动态地将输入框的最大可选日期设置为当前日期。我们利用了 Date 对象来获取当前日期信息,并使用了 toISOString() 方法将其转换为 yyyy-mm-dd 的字符串格式。