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的CSS 多栏(Multi-column)实现瀑布流源码分享
Jun 11 HTML / CSS
一款纯css3实现的鼠标经过按钮特效教程
Nov 09 HTML / CSS
用CSS3打造HTML5的Logo(实现代码)
Jun 16 HTML / CSS
W3C公布最新的HTML5标准草案
Oct 17 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
Jan 07 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
Jul 07 HTML / CSS
HTML5自定义视频播放器源码
Jan 06 HTML / CSS
html5默认气泡修改的代码详解
Mar 13 HTML / CSS
HTML5调用手机发短信和打电话功能
Apr 29 HTML / CSS
AmazeUI框架搭建的方法步骤(图文)
Aug 17 HTML / CSS
Ratchet 模态框的实现
Aug 19 HTML / CSS
html form表单基础入门案例讲解
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
PHP处理Oracle的CLOB实例
2014/11/03 PHP
WordPress中is_singular()函数简介
2015/02/05 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
php+redis实现消息队列功能示例
2019/09/19 PHP
纯JavaScript实现的完美渐变弹出层效果代码
2010/04/02 Javascript
JavaScript闭包函数访问外部变量的方法
2014/08/27 Javascript
js实现简单随机抽奖的方法
2015/01/27 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
2018/08/06 Javascript
vue.js template模板的使用(仿饿了么布局)
2018/08/13 Javascript
VUE预渲染及遇到的坑
2018/09/03 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
2018/11/02 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
2019/04/11 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
2019/11/12 Javascript
详细分析React 表单与事件
2020/07/08 Javascript
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
Python的time模块中的常用方法整理
2015/06/18 Python
Python实现复杂对象转JSON的方法示例
2017/06/22 Python
Python 实现简单的shell sed替换功能(实例讲解)
2017/09/29 Python
Python模拟随机游走图形效果示例
2018/02/06 Python
Python2.7.10以上pip更新及其他包的安装教程
2018/06/12 Python
Pycharm新手教程(只需要看这篇就够了)
2019/06/18 Python
python安装scipy的方法步骤
2019/06/26 Python
Python编译成.so文件进行加密后调用的实现
2019/12/23 Python
使用pandas实现筛选出指定列值所对应的行
2020/12/13 Python
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
2012/12/13 HTML / CSS
HTML5的postMessage的使用手册
2018/12/19 HTML / CSS
SmartBuyGlasses美国官网:太阳眼镜和眼镜
2017/08/20 全球购物
乌克兰香水和化妆品网站:Notino.ua
2018/03/26 全球购物
如何进行Linux分区优化
2016/09/13 面试题
高中学生干部学习的自我评价
2014/02/21 职场文书
九年级英语教学反思
2016/02/15 职场文书
2020优秀员工演讲稿(三篇)
2019/10/17 职场文书
Python利器openpyxl之操作excel表格
2021/04/17 Python
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL