HTML 日期范围输入 - HTML

在开发 Web 应用程序时，常常需要从用户那里获得日期范围，例如开始日期和结束日期。HTML 提供了一些元素和属性，可以方便地实现这些输入。

HTML 日期输入

HTML 5 引入了一些新的输入类型，其中包括日期输入类型。日期输入类型允许用户选择日期，该日期根据特定格式进行显示和验证。

以下是日期输入类型的基本语法：

<input type="date" name="birthday">

这将生成标题为“birthday”的日期输入字段。在大多数现代浏览器中，该字段将显示为日历弹出窗口，用户可以在其中选择日期。

HTML 开始和结束日期范围输入

要设置日期范围输入，可以使用 HTML 5 中的 min 和 max 属性。这些属性指定日期输入字段允许选择的最小和最大日期。

以下是具有开始和结束日期范围的日期选择器的基本语法：

<label for="start">开始日期:</label>
<input type="date" id="start" name="start" min="2022-01-01" max="2022-12-31">
<label for="end">结束日期:</label>
<input type="date" id="end" name="end" min="2022-01-01" max="2022-12-31">

在上面的示例中，我们使用了两个日期输入字段和 min/max 属性。这将限制输入字段可用的日期范围为 2022 年 1 月 1 日至 2022 年 12 月 31 日之间的日期。

HTML 日期范围选择器

如果您需要在一个字段中选择日期范围，可以使用开源 JavaScript 库。以下是代码示例：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment/min/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

<input type="text" name="daterange" value="01/01/2022 - 12/31/2022" />

<script>
$(function() {
    $('input[name="daterange"]').daterangepicker({
        opens: 'left'
    }, function(start, end, label) {
        console.log("选择了日期范围: " + start.format('YYYY-MM-DD') + ' 至 ' + end.format('YYYY-MM-DD') + ' (' + label + ')');
    });
});
</script>

在上面的示例中，我们使用了 Date Range Picker 库，并在 HTML 中包含了必要的链接。我们还创建了一个文本输入字段，并调用 daterangepicker() 方法来将其转换为日期范围选择器。 我们还通过“opens”选项指定了选择器的打开位置。在选择日期范围后，可以使用回调函数来获取所选日期范围。

总的来说，HTML 提供了许多选项来在 Web 应用程序中实现日期范围输入。无论您正在构建何种类型的应用，都可以使用这些选项之一来获取用户所需的日期范围。