HTML5新控件之日期和时间选择输入的实现代码


Posted in HTML / CSS onSeptember 13, 2018

HTML5定义了几个与日期有关的新控件。支持日期控件的浏览器会提供一个方便的下拉式日历,供用户选择。

 注意:目前只有Chrome和Opera提供下拉式日历支持,其它浏览器仍是一个普通文本框。

1,日期控件 - date

HTML5新控件之日期和时间选择输入的实现代码

<input type="date" value="2015-09-24"/>

2,时间控件 - time

HTML5新控件之日期和时间选择输入的实现代码

<input type="time" value="13:59"/>
<input type="time" value="13:59:59"/>

3,日期时间控件 - datetime-local

HTML5新控件之日期和时间选择输入的实现代码

<input type="datetime-local" value="2015-09-24T13:59:59"/>

4,月控件 - month

HTML5新控件之日期和时间选择输入的实现代码

<input type="month" value="2015-09"/>

5,周控件 - week

HTML5新控件之日期和时间选择输入的实现代码

<input type="week" value="2015-W02"/>

6,日期时间控件也支持min和max属性,表示可设置的最小和最大时间

HTML5新控件之日期和时间选择输入的实现代码

<input type="date" value="2015-09-24" min="2015-09-16" max="2015-09-26"/>

总结

以上所述是小编给大家介绍的HTML5新控件之日期和时间选择输入,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
css3实现一个div设置多张背景图片及background-image属性实例演示
Aug 10 HTML / CSS
移动端rem布局的两种实现方法
Jan 03 HTML / CSS
修复iPhone的safari浏览器上submit按钮圆角bug
Dec 24 HTML / CSS
CSS3自定义滚动条样式的示例代码
Aug 21 HTML / CSS
浅谈HTML5 defer和async的区别
Jun 07 HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
Sep 12 HTML / CSS
HTML5 Canvas阴影使用方法实例演示
Aug 02 HTML / CSS
Html5无刷新修改browser Url的方法
Jan 15 HTML / CSS
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
Mar 27 HTML / CSS
用html5绘制折线图的实例代码
Mar 25 HTML / CSS
详解WebSocket跨域问题解决
Aug 06 HTML / CSS
几款流行的HTML5 UI框架比较(小结)
Apr 08 HTML / CSS
Html5中的桌面通知Notification的实现
Sep 25 #HTML / CSS
详解canvas drawImage()方法绘制图片不显示的问题
Oct 08 #HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
Oct 08 #HTML / CSS
传统HTML页面实现模块化加载的方法
Oct 15 #HTML / CSS
html5/css3响应式页面开发总结
Oct 16 #HTML / CSS
教你如何一步一步用Canvas写一个贪吃蛇
Oct 22 #HTML / CSS
HTML高亮关键字的实现代码
Oct 22 #HTML / CSS
You might like
PHP实现生成透明背景的PNG缩略图函数分享
2014/07/08 PHP
smarty缓存用法分析
2014/12/16 PHP
WordPress中查询文章的循环Loop结构及用法分析
2015/12/17 PHP
PHP批斗大会之缺失的异常详解
2019/07/09 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
jQuery操作select的实例代码
2012/06/14 Javascript
关于锚点跳转及jQuery下相关操作与插件
2012/10/01 Javascript
不使用jquery实现js打字效果示例分享
2014/01/19 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
jQuery实现长按按钮触发事件的方法
2015/02/02 Javascript
如何处理JSON中的特殊字符
2016/11/30 Javascript
微信小程序 实战实例开发流程详细介绍
2017/01/05 Javascript
使用mint-ui开发项目的一些心得(分享)
2017/09/07 Javascript
BACKBONE.JS 简单入门范例
2017/10/17 Javascript
微信小程序返回多级页面的实现方法
2017/10/27 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
对Layer UI 模块化的用法详解
2019/09/26 Javascript
jquery轮播图插件使用方法详解
2020/07/31 jQuery
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
2020/09/21 Javascript
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
实例解析Python设计模式编程之桥接模式的运用
2016/03/02 Python
用Python实现斐波那契(Fibonacci)函数
2016/03/25 Python
用python找出那些被“标记”的照片
2017/04/20 Python
分析运行中的 Python 进程详细解析
2019/06/22 Python
详解python中eval函数的作用
2019/10/22 Python
opencv-python的RGB与BGR互转方式
2020/06/02 Python
用于ETL的Python数据转换工具详解
2020/07/21 Python
基于CentOS搭建Python Django环境过程解析
2020/08/24 Python
HTML5本地存储和本地数据库实例详解
2017/09/05 HTML / CSS
存储过程的优点有哪些
2012/09/27 面试题
params有什么用
2016/03/01 面试题
高中的自我鉴定
2013/12/16 职场文书
茶叶店创业计划书范文
2014/01/19 职场文书
幼儿园见习报告
2014/10/30 职场文书
幼儿园教师考核评语
2014/12/31 职场文书
数据库的高级查询六:表连接查询:外连接(左外连接,右外连接,UNION关键字,连接中ON与WHERE的不同)
2021/04/05 MySQL