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 相关文章推荐
常用的四种CSS透明属性介绍
Apr 12 HTML / CSS
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
Nov 11 HTML / CSS
用CSS3来实现社交分享按钮
Nov 11 HTML / CSS
详解CSS3实现响应式手风琴效果
Jun 10 HTML / CSS
详解css3中dispaly的Grid布局与Flex布局
Sep 11 HTML / CSS
html5 touch事件实现触屏页面上下滑动(二)
Mar 10 HTML / CSS
前端面试必备之html5的新特性
Sep 05 HTML / CSS
浅谈three.js中的needsUpdate的应用
Nov 12 HTML / CSS
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
Dec 07 HTML / CSS
HTML5 embed标签定义和用法详解
May 09 HTML / CSS
HTML5不支持frameset的两种解决方法
Nov 14 HTML / CSS
HTML5+css3:3D旋转木马效果相册
Jan 03 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
攻克CakePHP系列二 表单数据显示
2008/10/22 PHP
php for 循环语句使用方法详细说明
2010/05/09 PHP
php读取EXCEL文件 php excelreader读取excel文件
2012/12/06 PHP
php计算几分钟前、几小时前、几天前的几个函数、类分享
2014/04/09 PHP
PHP+FFMPEG实现将视频自动转码成H264标准Mp4文件
2014/09/24 PHP
PHP文件操作详解
2016/12/30 PHP
thinkphp3.2实现跨控制器调用其他模块的方法
2017/03/14 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
PHP设计模式之模板模式定义与用法详解
2018/12/20 PHP
不常用但很实用的PHP预定义变量分析
2019/06/25 PHP
使用composer 安装 laravel框架的方法图文详解
2019/08/02 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
浅析javascript闭包 实例分析
2010/12/25 Javascript
单击按钮显示隐藏子菜单经典案例
2013/01/04 Javascript
JavaScript实现找出字符串中第一个不重复的字符
2014/09/03 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
2017/08/06 Javascript
JS解析后台返回的JSON格式数据实例
2018/08/06 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
微信小程序自定义导航栏
2018/12/31 Javascript
js实现的格式化数字和金额功能简单示例
2019/07/30 Javascript
Node.js path模块,获取文件后缀名操作
2020/11/07 Javascript
[42:56]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python socket C/S结构的聊天室应用实现
2014/11/30 Python
python安装PIL模块时Unable to find vcvarsall.bat错误的解决方法
2016/09/19 Python
python如何获取服务器硬件信息
2017/05/11 Python
Python入门_浅谈for循环、while循环
2017/05/16 Python
Python入门_浅谈逻辑判断与运算符
2017/05/16 Python
启动targetcli时遇到错误解决办法
2017/10/26 Python
Python3.5内置模块之shelve模块、xml模块、configparser模块、hashlib、hmac模块用法分析
2019/04/27 Python
HQhair美国/加拿大:英国化妆品、美容及美发产品商城
2019/04/15 全球购物
Craghoppers德国官网:户外和旅行服装
2020/02/14 全球购物
2014年圣诞节促销方案
2014/03/14 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书
基层干部个人对照检查及整改措施
2014/10/28 职场文书
2015年党员自我剖析材料
2014/12/17 职场文书
2015年先进个人自荐书
2015/03/24 职场文书