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之UI元素状态伪类选择器实例演示
Aug 11 HTML / CSS
CSS3之背景尺寸Background-size使用介绍
Oct 14 HTML / CSS
html5+css3之CSS中的布局与Header的实现
Nov 21 HTML / CSS
用CSS3的box-reflect设置文字倒影效果的方法讲解
Mar 07 HTML / CSS
html5 input属性使用示例
Jun 28 HTML / CSS
12个不为大家熟知的HTML5设计小技巧
Jun 02 HTML / CSS
HTML5无刷新改变当前url的代码
Mar 15 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
Jan 10 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
Jul 18 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
Sep 16 HTML / CSS
Unicode中的CJK(中日韩统一表意文字)字符小结
Dec 06 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方法调用模式与函数调用模式简例
2011/09/20 PHP
php生成txt文件标题及内容的方法
2014/01/16 PHP
PHP实现的多彩标签效果代码分享
2014/08/21 PHP
学习php设计模式 php实现访问者模式(Visitor)
2015/12/07 PHP
ThinkPHP项目分组配置方法分析
2016/03/23 PHP
浅谈PHP的反射API
2017/02/26 PHP
php字符串函数 str类常见用法示例
2020/05/15 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
不错的一个日期输入 动态
2006/11/06 Javascript
JavaScript的9个陷阱及评点分析
2008/05/16 Javascript
textarea中的手动换行处理的jquery代码
2011/02/26 Javascript
JQuery与JS里submit()的区别示例介绍
2014/02/17 Javascript
jquery easyui使用心得
2014/07/07 Javascript
js使用removeChild方法动态删除div元素
2014/08/01 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
2015/01/20 Javascript
javascript实现验证身份证号的有效性并提示
2015/04/30 Javascript
jquery判断复选框是否被选中的方法
2015/10/16 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
2016/06/20 Javascript
浅析ES6的八进制与二进制整数字面量
2016/08/30 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
2016/12/08 Javascript
详解webpack进阶之插件篇
2017/07/06 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
2017/08/16 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
微信小程序ibeacon三点定位详解
2018/10/31 Javascript
优化Vue项目编译文件大小的方法步骤
2019/05/27 Javascript
生产制造追溯系统之再说条码打印
2019/06/03 Javascript
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
Python调用C++程序的方法详解
2017/01/24 Python
Python基于FTP模块实现ftp文件上传操作示例
2018/04/23 Python
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
Python如何实现邮件功能
2020/05/27 Python
欧克利英国官网:Oakley英国
2019/08/24 全球购物
求职信范文怎么写
2014/01/29 职场文书
2014年汽车销售工作总结
2014/12/01 职场文书
工作简报怎么写
2015/07/21 职场文书
JS代码编译器Monaco使用方法
2021/06/11 Javascript