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特性绘制简易版围棋效果
Sep 28 HTML / CSS
css3弹性盒模型(Flexbox)详细介绍
Oct 08 HTML / CSS
利用CSS3实现圆角的outline效果的教程
Jun 05 HTML / CSS
css3实现可拖动的魔方3d效果
May 07 HTML / CSS
css3实现六边形边框的实例代码
May 24 HTML / CSS
使用HTML5的File实现base64和图片的互转
Aug 01 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
Jan 04 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
Dec 15 HTML / CSS
使用Html5中的cavas画一面国旗
Sep 25 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
Oct 14 HTML / CSS
CSS3 制作的图片滚动效果
Apr 14 HTML / CSS
CSS中使用grid布局实现一套模板多种布局
Jul 15 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
smarty的保留变量问题
2008/10/23 PHP
php循环检测目录是否存在并创建(循环创建目录)
2011/01/06 PHP
PHP的PDO错误与错误处理
2019/01/27 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
Javascript的IE和Firefox兼容性汇编(zz)
2007/02/02 Javascript
JavaScript 动态创建VML的方法
2009/10/14 Javascript
$.format,jquery.format 使用说明
2011/07/13 Javascript
JS去除数组重复值的五种不同方法
2013/09/06 Javascript
javascript检测浏览器的缩放状态实现代码
2014/09/28 Javascript
Javascript数组与字典用法分析
2014/12/13 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
Web打印解决方案之普通报表打印功能
2016/08/29 Javascript
BootStrap网页中代码显示用法详解
2016/10/21 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
2016/11/02 Javascript
js返回顶部实例分享
2016/12/21 Javascript
canvas雪花效果核心代码分享
2017/02/19 Javascript
JavaScript调试之console.log调试的一个小技巧分享
2017/08/07 Javascript
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
javascript中call()、apply()的区别
2019/03/21 Javascript
javascript异常处理实现原理详解
2020/02/17 Javascript
swiper自定义分页器的样式
2020/09/14 Javascript
javascript canvas封装动态时钟
2020/09/30 Javascript
Python3实现Web网页图片下载
2016/01/28 Python
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
检测python爬虫时是否代理ip伪装成功的方法
2019/07/12 Python
详解使用Python下载文件的几种方法
2019/10/13 Python
tensorflow入门:tfrecord 和tf.data.TFRecordDataset的使用
2020/01/20 Python
基于Python实现人脸自动戴口罩系统
2020/02/06 Python
python tqdm 实现滚动条不上下滚动代码(保持一行内滚动)
2020/02/19 Python
html5 sessionStorage会话存储_动力节点Java学院整理
2017/07/06 HTML / CSS
Opodo英国旅游网站:预订廉价航班、酒店和汽车租赁
2018/07/14 全球购物
Europcar德国:全球汽车租赁领域的领导者
2018/08/15 全球购物
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
大学生迟到检讨书500字
2014/10/17 职场文书