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使用多列制作瀑布流
May 10 HTML / CSS
基于CSS3特效之动画:animation的应用
May 09 HTML / CSS
推荐10个CSS3 制作的创意下拉菜单效果
Feb 11 HTML / CSS
IE浏览器单独写CSS样式的几种方法
Oct 14 HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
Apr 16 HTML / CSS
css和css3弹性盒模型实现元素宽度(高度)自适应
May 15 HTML / CSS
Html5移动端获奖无缝滚动动画实现示例
Jun 25 HTML / CSS
HTML5 创建canvas元素示例代码
Jun 04 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
Jul 31 HTML / CSS
详解HTML5布局和HTML5标签
Oct 26 HTML / CSS
CSS中em的正确打开方式详解
Apr 08 HTML / CSS
详解CSS不定宽溢出文本适配滚动
May 24 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
php5.5新数组函数array_column使用
2013/07/08 PHP
PHP的fsockopen、pfsockopen函数被主机商禁用的解决办法
2014/07/08 PHP
laravel框架 laravel-admin上传图片到oss的方法
2019/10/13 PHP
5 cool javascript apps
2007/03/24 Javascript
javascript实现上传图片并预览的效果实现代码
2011/04/11 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
2013/09/29 Javascript
jQuery学习笔记之2个小技巧
2015/01/19 Javascript
JS实现网页滚动条感应鼠标变色的方法
2015/02/26 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
switch语句的妙用(必看篇)
2016/10/03 Javascript
Angular使用ng-messages与PHP进行表单数据验证
2016/12/28 Javascript
深入对Vue.js $watch方法的理解
2017/03/20 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
2017/06/17 Javascript
利用Three.js如何实现阴影效果实例代码
2017/09/26 Javascript
tangram.js库实现js类的方式实例分析
2018/01/06 Javascript
Vuex入门到上手教程
2018/06/20 Javascript
js中的reduce()函数讲解
2019/01/18 Javascript
js的对象与函数详解
2019/01/21 Javascript
Vue实现简单的跑马灯
2020/05/25 Javascript
Vue实现手机计算器
2020/08/17 Javascript
python常规方法实现数组的全排列
2015/03/17 Python
python实现复制整个目录的方法
2015/05/12 Python
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
关于pip的安装,更新,卸载模块以及使用方法(详解)
2017/05/19 Python
python的pandas工具包,保存.csv文件时不要表头的实例
2018/06/14 Python
美国市场上最实惠的送餐服务:Dinnerly
2018/03/18 全球购物
英国儿童鞋和靴子:Start-Rite
2019/05/06 全球购物
哪些情况下不应该使用索引
2015/07/20 面试题
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的
2015/07/24 面试题
String s = new String(“xyz”);创建了几个String Object?
2015/08/05 面试题
市场营销专业大学生职业生涯规划文
2014/03/06 职场文书
文明倡议书范文
2014/04/15 职场文书
2014党员民主评议个人总结
2014/09/10 职场文书
婚礼女方父母答谢词
2015/01/04 职场文书
2015初中团委工作总结
2015/07/28 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书