HTML input date calendar

发布时间:2020-03-26 04:27:05发布者:admin浏览数:
将<input>标签的type属性值设置为date即可创建日期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="date" name="date"> <input type="submit" value="提交表单"/></form></body></html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201811/21/171329hhwral0clo28chhr.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).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="date" value="2017-03-01" name="date"> <input type="submit" value="提交表单"/></form></body></html>

通过value属性为控件设置默认的日期。

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

[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="date" required name="date"> <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="date" list="softwhy" required name="date"> <datalist id="softwhy"> <option value="2017-01-02" /> <option value="2017-01-03" /> <option value="2017-01-04" /> <option value="2017-01-05" /> </datalist> <input type="submit" value="提交表单"/></form></body></html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201811/21/171409wtellde4ze7lsadv.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="date" required name="date"> </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" id="ant" method="post" action="do.php"> <input type="submit" value="提交表单"/></form>日期:<input form="ant" type="date" disabled name="date"> </body></html>

通过disabled属性将控件设置为不可用状态。

程序开发 |  系统教程 |  软件应用 |  图形图像 |  网络应用 |  站长教程 |  网站建设 |  视频教程 |  硬件维护 |  IT资讯 |  中国it动力网
本站发布的系统与软件仅为个人学习测试使用,请在下载后24小时内删除,不得用于任何商业用途,否则后果自负,请支持购买微软正版软件!
如侵犯到您的权益,请及时通知我们,我们会及时处理。
Copyright @ 2019 中国it动力网 网站导航