html5选择时间范围

原创

mob64ca12eee07b 2023-08-19 05:20:45 ©著作权

文章标签 HTML5 html 日期选择 文章分类 HTML5 移动开发

©著作权归作者所有：来自51CTO博客作者mob64ca12eee07b的原创作品，请联系作者获取转载授权，否则将追究法律责任

HTML5选择时间范围

HTML5是HTML标准的第五个版本，它引入了许多新特性和API，其中之一就是时间选择器。时间选择器提供了一种方便的方式来选择时间范围，比如日期和时间。在本文中，我们将介绍如何使用HTML5的input元素以及相关的type属性来实现时间范围的选择。

input元素和type属性

input元素是HTML中最重要和常用的表单元素之一，它用于接受用户输入。HTML5为input元素添加了许多新的属性，其中之一就是type属性。type属性定义了输入字段的类型，用于指定应该如何验证和显示用户的输入。

HTML5中有一个type属性值为datetime-local，它可以用于选择日期和时间。然而，由于其在不同浏览器中的兼容性问题，我们更推荐使用type属性值为date和time分别选择日期和时间。

选择日期

要选择日期范围，我们可以使用两个input元素，分别设置它们的type属性为date，这将会显示一个日期选择框供用户选择。

<input type="date" id="start-date" name="start-date">
<input type="date" id="end-date" name="end-date">

上面的代码创建了两个日期选择框，分别用于选择起始日期和结束日期。用户可以在选择框中点击，然后使用日历来选择日期。

选择时间

要选择时间范围，我们可以使用两个input元素，分别设置它们的type属性为time，这将会显示一个时间选择框供用户选择。

<input type="time" id="start-time" name="start-time">
<input type="time" id="end-time" name="end-time">

上面的代码创建了两个时间选择框，分别用于选择起始时间和结束时间。用户可以在选择框中点击，然后使用滚动条或输入框来选择时间。

完整的时间范围选择

要选择完整的时间范围，我们可以将日期选择框和时间选择框结合在一起。一个简单的方法是使用一个input元素，将其type属性设置为datetime-local。

<input type="datetime-local" id="start" name="start">

上面的代码创建了一个时间选择框，用于选择日期和时间。用户可以在选择框中点击，然后使用日历和滚动条或输入框来选择完整的时间范围。

示例

下面是一个完整的示例，演示了如何使用HTML5的input元素和相关的type属性来选择时间范围。

<!DOCTYPE html>
<html>
<head>
  <title>选择时间范围示例</title>
</head>
<body>
  选择时间范围示例

  <form>
    <label for="start-date">起始日期：</label>
    <input type="date" id="start-date" name="start-date">

    <label for="end-date">结束日期：</label>
    <input type="date" id="end-date" name="end-date">

    <label for="start-time">起始时间：</label>
    <input type="time" id="start-time" name="start-time">

    <label for="end-time">结束时间：</label>
    <input type="time" id="end-time" name="end-time">

    <label for="start">起始时间范围：</label>
    <input type="datetime-local" id="start" name="start">

    <input type="submit" value="提交">
  </form>
</body>
</html>

上述示例中创建了一个包含日期选择框、时间选择框和完整时间范围选择框的表单。用户可以在这些选择框中输入或选择时间范围，然后点击提交按钮。