HTML5日期输入类型
在HTML5之前,对于这样的页面需求,最常见的方案是用Javascript日期选择组件。这几乎是无可争议、别无选择的做法。你可以在搜寻一下“javascript 日期选择框”,会发现有无数的可选择的JavaScript组件。大部分这些日期选择组件都提供将日期填充到指定的输入框里的功能。
HTML5里的date
input类型给了给了浏览器实现原生日历的机会,从此之后,JavaScript版的日历组件将退出历史舞台。
HTML5规范里只规定date
新型input输入类型,并没有规定日历弹出框的实现和样式。所以,各浏览器根据自己的设计实现日历。
目前只有谷歌浏览器完全实现日历功能。相信这种局面很快就会结束,所有的浏览器最终都将会提供原生的日历组件。
如果你使用的是谷歌浏览器,那你就可以在下面的实例演示中看到这个漂亮的日期组件。用鼠标点击输入框,就能看到浏览器原生的日历框。
约会日期:
如果你当前使用的浏览器还没有实现日历组件,下面的图片你可以先睹为快。
无需任何的JavaScript,它变成了一个最基本的input类型 <input type=”date”/>
<label for="meeting">约会日期:</label><input id="meeting" type="date" value="2014-01-13"/>
HTML5让Web程序员的工作变得异常简单,不是吗?不仅如此,我们得到的不仅仅只有一个“日期”类型的input,还有一系列相关的日期、时间参数让我们自定义。我们虽然称之为“日期”类型,但这里的type实际上是可以为“date”、“week”、“month”、“time”、“datetime”和“datetime-local”。下面我将用实例加图文的方式向大家演示各种type的外观表现。
需要提醒的是,下面的截图都是在谷歌浏览器中效果,其它浏览器中显示的样子会稍有不同,但功能会是一样的。
1. 日期(<input type=”date”/>)
这是最基本的日期选择器,你只能从日历中选择某个日期。
请选择日期:
截图:
2. 周(<input type=”week”/>)
这时,你选择的就不是一个日期了,而是周。请注意周数显示的方式。
请选择周:
截图:
3. 月份(<input type=”month”/>)
这时你选择的是月份,跟“date”类型比起来少了后面的日子数。
请选择月:
截图:
4. 时间(<input type=”time”/>)
这是最简单的一种显示,没有日历,只能选择时间。
请选择时间:
截图:
5. 日期+时间(<input type=”datetime”/>)
既显示日期组件,又显示时间组件,其实就是“date”类型和“time”类型的组合。
请选择日期和时间:
截图:
6. 本地日期时间(<input type=”datetime-local”/>)
顾名思义,就是用本地时间显示。
请选择日期和时间:
截图:
除了上面这些类型为,日期输入类型还有一些其它属性需要注意。
属性 | 描述 |
---|---|
值 | 这是HTML里input元素的通用属性。就是输入框里的数据。 |
min | 日期或时间的最小值 |
max | 日期或时间的最大值 |
step |
步长。不同的类型有不同的缺省步长。
|
转载于:https://www.cnblogs.com/ince/p/9384294.html
HTML5日期输入类型相关推荐
- html自动年份版权,如何将html5日期输入限制在合理的年份
html5 input type ='date'用于Chrome中以输入最新免费jqgrid中的日期.如何将html5日期输入限制在合理的年份 它允许输入5位数字的日期,如20161. 如何解决此问题 ...
- html中时间long型转换,html5日期转long
正确:日期,时间均是实时的 var inDate = $("#inDate").val().trim(); if(inDate != "") { inDate ...
- HTML5 中的 input 元素的输入类型(type 属性的取值)
目录 输入类型:text 输入类型:image 输入类型:reset 输入类型:password 输入类型:submit 输入类型:radio 输入类型:checkbox 输入类型:button 输入 ...
- html表单新增类型,HTML5表单设计——新增输入类型和新增表单属性
新增输入类型 email类型 用来输入邮箱地址的文本框.该文本框与普通文本框在页面显示时没有任何区别,专门用于接收Email地址信息.提交表单时自动验证是否符合Email地址格式,如果不符合,将提示相 ...
- HTML5中是否有浮点输入类型?
本文翻译自:Is there a float input type in HTML5? According to html5.org , the "number" input ty ...
- html5表单新增的输入类型,HTML5之表单新增类型介绍
1.html5的input标签的type类型新增介绍: 2.表单新增属性介绍: 3.代码示例: 1970 1980 1990 默认值: form="register" /> ...
- 下列关于html5表单的多样输入方式,IT兄弟连 HTML5教程 HTML5表单 多样的输入类型1...
原标题:IT兄弟连 HTML5教程 HTML5表单 多样的输入类型1 HTML5拥有多个新的表单输入类型,这些新特性提供了更好的输入控制和验证.并不是所有的主浏览器都支持新的input类型,不过我们可 ...
- GBase 8c 数据类型-日期/时间类型之日期输入
日期和时间的输入格式包括ISO-8601格式.SQL-兼容格式. 传统POSTGRES格式或者其它的形式.系统支持按照日.月.年的顺序自定义日期输入.如果把DateStyle参数设置为MDY,则按照& ...
- HTML input type 输入类型
本章描述 <input> 元素的输入类型. 输入类型:text <input type="text"> 定义供文本输入的单行输入字段: 实例 <for ...
最新文章
- 服务器打印文档 图片显示是叉,Lodop背景图无图片时显示放大叉号问题
- IE9最终版透露IE10信息 或将自动在线升级
- 服务器用户连接数设置
- 全局变量初始化顺序探究
- Docker 持续推动创新,三款应用为您指引未来趋势
- 大数据流水线系统PiFlow v0.5
- 开发者论坛一周精粹(第六期):阿里B2B研发管理难题如何应对?打造强有力的技术中台...
- Atitit enhance dev effect提升开发效率的十大原理与方法v2 u66.docx Atitit enhance dev effect提升开发效率的十大原理 目录 1. 管理	2
- python包管理工具pip_pip_python包管理工具(pip)下载 v9.0.1官方版 - 121下载站
- linux主机路由命令,linux查看路由命令
- H5利用JS调用摄像头实现拍照效果
- 中望cad自定义快捷键命令_设置快捷键提高中望CAD绘图速度
- 康乐忆享|志愿者心得精选——张凌旭
- addClass(““).delay().removeClass(““);没有效果的解决方式
- Cabbage教学(2)——类型转换与字符串操作
- 网络 DMZ 区和网络安全等级简介
- 如何使用音频转换器将多个音频合并为一个音频
- 优秀网站导航设计的6个原则
- 开氏温度与摄氏度换算_【知识分享】柴油密度与温度的关系
- linux命令行看图工具,六个鲜为人知的超酷Unix/Linux命令