您的位置:首页> 前端教程> HTML教程
文章导航

HTML input datetime-local calendar 控件

2019-3-8 16:20| 作者: admin| 查看: 971| 评论: 0|来自: 蚂蚁部落

将<input>标签的type属性值设置为datetime-local即可创建时间日期calendar控件。

此calendar控件是HTML5新增。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  时间日期:<input type="datetime-local" name="datetime">
  <input type="submit" value="提交表单"/>
</form>
</body>
</html>

上面的代码可以创建时间日期控件,运行效果截图:

a:3:{s:3:\"pic\";s:43:\"portal/201702/08/122120jik0skwktf6th8s8.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

控件还有一些其他属性,下面分别做一下介绍:

(1).value:规定控件的value属性值,也就是控件的默认日期。

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

(3).list(HTML5):规定输入域的datalist,具体参阅HTML datalist选项列表一章节。

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

(5).autofocus(HTML5):规定在页面加载时,域自动地获得焦点。

(6).min和max(HTML5):限定时间日期上下限。

(7).step(HTML5):设置此属性之后,可以将时间设置到秒。

(8).disabled:设置控件为不可用状态。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  时间日期:<input type="datetime-local" value="2017-01-11T16:00:00" name="datetime">
  <input type="submit" value="提交表单"/>
</form>
</body>
</html>

通过value属性为控件设置默认的时间日期;value的格式:YYYY-MM-DDTHH:mm:ss。

特别说明:定义的日期必须要格式正确,否则无效。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  时间日期:<input type="datetime-local" required name="datetime">
  <input type="submit" value="提交表单"/>
</form>
</body>
</html>

required属性只有一个属性值"required"(可以省略),规定控件值是必填,否则报错。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  <input type="datetime-local" list="softwhy" required name="datetime">
  <datalist id="softwhy">
    <option  value="2017-01-11T16:00:00" />
    <option  value="2017-01-12T16:00:00" />
    <option  value="2017-01-13T16:00:00" />
    <option  value="2017-01-14T16:00:00" />
  </datalist>   
  <input type="submit" value="提交表单"/>
</form>
</body>
</html>

<datalist>定义了可选的时间日期列表,点击列表项可以将时间日期写入控件,效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201702/08/123007y20r9nqdjjdk0wp8.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

特别说明:定义的时间日期必须要格式正确,否则无效。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" id="ant" method="post" action="do.php"> 
  <input type="submit" value="提交表单"/>
</form>
日期:<input form="ant" type="datetime-local" required name="datetime"> 
</body>
</html>

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

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  时间日期:<input type="datetime-local" name="datetime"
              min="2016-06-27T15:43"
              max="2017-06-27T15:43"
              >
  <input type="submit" value="提交表单"/>
</form>
</body>
</html>

设定了时间日期控件选取的范围。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  时间日期:<input type="datetime-local" step="1" name="datetime">
  <input type="submit" value="提交表单"/>
</form>
</body>
</html>

添加step属性之后,控件就会显示秒字段,否则不显示。


鲜花

握手

雷人

路过

鸡蛋
上一篇:HTML <header> 标签下一篇:Data:URL 图片

最新评论

返回顶部