zoukankan      html  css  js  c++  java
  • input的type属性引申的日历组件

    HTML5规范里只规定date新型input输入类型,并没有规定日历弹出框的实现和样式。所以,各浏览器根据自己的设计实现日历。
    目前只有谷歌浏览器完全实现日历功能。相信这种局面很快就会结束,所有的浏览器最终都将会提供原生的日历组件。

    如果你使用的是谷歌浏览器,那你就可以在下面的实例演示中看到这个漂亮的日期组件。用鼠标点击输入框,就能看到浏览器原生的日历框。

    如果你当前使用的浏览器还没有实现日历组件,下面的图片你可以先睹为快。

    无需任何的JavaScript,它变成了一个最基本的input类型 <input type=”date”/>

    <label for="meeting">约会日期:</label><input id="meeting" type="date" value="2014-01-13"/>

    <input type="date" name="p.applyDate" value="<fmt:formatDate value='${p.applyDate}' pattern='yyyy-MM-dd' />">
    pattern 是时间格式类型,一定要与相应的type类型一致才能正确的读取,不然的话就读取不了相应的时间

    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”/>)

    顾名思义,就是用本地时间显示。

    请选择日期和时间: 

    截图:

    转载:http://www.cnblogs.com/zhangliang88/p/5467552.html

  • 相关阅读:
    输出流
    异常处理
    异常限制
    多个受控异常
    跟踪异常传播
    动手动脑练习2
    动手动脑练习
    文件总结
    程序员修炼之道3
    Shell教程 之printf命令
  • 原文地址:https://www.cnblogs.com/yongwang/p/6593319.html
Copyright © 2011-2022 走看看