HTML input time calendar 控件

小灰灰 2020-05-15 18:39 865阅读 0赞

# HTML input time calendar 控件

HTML5之前，实现时间控件通常要使用JavaScript，比较困难。

虽然有很多现成的插件可以使用，但总归要使用若干JavaScript和CSS代码。

当前，只要将input的type属性值设置为"time"即可创建一个time控件，非常简单快捷，并且功能也很实用。

特别说明：时间控件只包括小时字段和分钟字段，因为时间通常指的就是小时与时间或者秒，如果加上日期的话，那么通常会包括年、月或者日，这一差别大家可以体会一下。

首先看一段代码实例：

代码运行效果截图如下：

![](/images/1589567939974.png)

首先对控件的主要特点做一下说明：

（1）.可以通过CSS对齐一些属性进行控制。

（2）.分为前后小时与分钟两个字段，当然提交表单时只有一个包含时间与分钟的value值。

（3）.鼠标悬浮会出现叉号与上下箭头按钮，点击叉号能够清空控件，点击上下箭头可以设置小时和分钟的值。此控件还有若干属性，下面介绍一下比较常用的几个属性：

（1）.value：控件value值，通过此属性可以设置或者获取空间的时间值。

（2）.required（HTML5）:规定控件内容是必填的。

（3）.list（HTML5）:规定输入域的datalist，

（4）.form（HTML5）:规定输入域所属的一个或多个表单。

（5）.autofocus（HTML5）：规定在页面加载时，域自动地获得焦点。

（6）.disabled：设置控件为不可用状态，在这个状态下，控件的值也不会被提交。

**代码实例：**

代码运行效果截图如下：

![](/images/1589567924856.png)

通过value属性可以设置控件的值，有一点需要特别注意，value值的格式要规范：

（1）.值分为两部分，用冒号分隔，左边表示小时，右边表示分钟。

（2）.每一部分的数字必须是两位，也就是二十四小时制，如果是个位数，前面补零，否则无效。

代码运行效果截图如下：

![](/images/1589567912304.png)

required属性规定控件为必填，也就是value值不能为空，否则报错。

特别说明：required属性无需属性值。

```html
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style>
input[type=time]{color:blue}
</style>   
</head>
<body>
<form name="myform" method="post" action="do.php">
  <input type="time" list="dandelioncloud" required name="time">
  <datalist id="dandelioncloud">
    <option  value="02:59" />
    <option  value="02:50" />
    <option  value="02:40" />
    <option  value="02:20" />
  </datalist>   
  <input type="submit" value="提交表单"/>
</form>
</body>
</html>
```

代码运行效果截图如下：

![](/images/1589567893966.png)

代码分析如下：

（1）.将time控件的list属性值设置为datalist控件的id属性值，即可将两者关联起来。

（2）.datalist的子元素option可以设置设置备选的时间列表，与select下拉菜单比较类似。

（3）.option的value属性值同样必须遵守一定的格式，与time控件value属性值格式相同。

（4）.鼠标悬浮于time控件，右侧会出现向下的箭头，点击可以弹出option预定义的时间列表。

```html
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style>
input[type=time]{color:blue}
</style>   
</head>
<body>
<form name="myform" id="ant" method="post" action="do.php">
  <input type="submit" value="提交表单"/>
</form>
日期:<input form="ant" type="time" required name="time"> 
</body>
</html>
```

form属性引用所属表单的id，于是虽然控件在`<form>`之外，但依然是该表单的一部分。

autofocus与disabled属性就不再演示了，比较简单，autofocus属性规定当页面加载完毕之后，控件会自动获取焦点，disabled规定控件处于不可用状态，与readonly属性区分一下，不可以用状态不但不可以编辑，而且控件的值也不能够被提交到服务器，但是只读可以被提交。