码迷,mamicode.com
首页 > Web开辟 > 详细

HTMLinput日期输入类型

时间:2017-06-11 14:57:28      浏览:22892      评论:0      收藏:0      [点我收藏+]

标签:选择   span   token   时间   谷歌浏览器   rip   弹出框   www   java   

在很多页面和web应用中都有输入日期和时间的处所,最典范的是订飞机票,火车票,酒店,批萨等网站。

在HTML5之前,关于如许的页面需求,最罕见的筹划是用Javascript日期选择组件。这简直是无可争议、别无选择的做法。你可以在搜索一下“javascript 日期选择框”,会发明有有数的可选择的JavaScript组件。大年夜部分这些日期选择组件都供给将日期填充到指定的输入框里的功能。

HTML5里的dateinput类型给了给了浏览器完成原诞辰历的机会,从此以后,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 步长。不合的类型有不合的缺省步长。
  • Date – 缺省是1天
  • Week – 缺省是1周
  • Month – 缺省是1月
  • Time – 缺省是1分钟
  • DateTime – 缺省是1分钟
  • Local DateTime – 缺省是1分钟

HTMLinput日期输入类型

标签:选择   span   token   时间   谷歌浏览器   rip   弹出框   www   java   

原文地址:http://www.cnblogs.com/qwerds/p/6985120.html

(5)
(15)
   
告发
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权一切 京ICP备13008772号-2
迷上了代码!