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

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

请选择日期和时间:

截图:

HTML5中的时间类型,另外EL表达式的时间值来读取时间,并且还可以更改时间的更多相关文章

  1. J2EE中getParameter与getAttribute以及EL表达式${requestScope}和${param[]}

    getParameter ① 得到的都是String类型的.如http://name.jsp?name=xy中的xy ② 获取POST/GET传递的参数值 ③ 用于客户端重定向,如点击链接或提交按扭时 ...

  2. jsp中常用操作字符串的el表达式

    由于在JSP页面中显示数据时,经常需要对显示的字符串进行处理,SUN公司针对于一些常见处理定义了一套EL函数库供开发者使用. 准备工作:1)导入jar包:standard.jar和jstl.jar2) ...

  3. JavaScript 里,$ 代表什么?/JQuery是什么语言?/html中用link标签引入css时的中 rel="stylesheet"属性?/EL表达式是什么?

    JavaScript 里,$ 代表什么? 比如说我写一个mouseover事件: $(document).ready(function(){ $("p").mouseover(fu ...

  4. 在Maven项目中,jsp不解析el表达式

    我的这个项目是用Maven-archetype-webapp项目创建的,如下图所示: 有这种方式创建有一个坑,就是它使用的servlet版本是2.3,而servlet2.4以下的版本是不会自动解析el ...

  5. struts2 request内幕 为什么在struts2用EL表达式可以取值

    不知道大家有没有想过这样一个问题:为什么在action中的实例变量,没有使用request.setAttribute()方法将值添加到request范围内,却能在jsp中用EL表达式取出? 众所周知, ...

  6. EL表达式获取属性值的原理

    EL表达式获取对象属性的原理是这样的:以表达式${user.name}为例EL表达式会根据name去User类里寻找这个name的get方法,此时会自动把name首字母大写并加上get前缀,一旦找到与 ...

  7. HTML5中input新增类型+表单新增属性+其他标签属性

    @ (猴头) Input 新增属性 email  邮箱(只在手机端有效) url  网址(只在iphone手机有效) tel  手机号(只在手机端有效) number  数字(右侧有上下按钮,只能输入 ...

  8. 如何将数据库中的值经过servlet传入到jsp页面,并且用EL表达式显示出值

    方法一:通过id查询某一数据库表中具体的行,将值封装在相应的对象中,如下面的对象Notice servlet中 String noticeId=request.getParameter("n ...

  9. Jboss中不能正常的解析EL表达式

    在写好EL表达是后发现在页面原封不动的现实成了${user.name}没有解析出来,我还以为那里出了问题,原来只要在页面添加上<%@ page isELIgnored="false&q ...

随机推荐

  1. IEqualityComparer<T>

    在linq中使用union和distinct都不起作用,结果发现必须传入一个实现了IEqualityComparer<T>的比较器 public class CompareUser : I ...

  2. 李洪强iOS经典面试题131

    培训机构量产iOS程序员,导致了现在iOS就业的浮躁和困难.但是技术好的人仍然不愁工作,而一些想进入行业捞一笔就走的人,势必在今年这种艰难就业形式下,被迫淘汰,转行. look.jpg 这张图是git ...

  3. 实现AJAX的基本步骤 。。转

    要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤: (1)创建XMLHttpRequest对象,也就是创建一个异步调用对象. (2)创建一个新的HTTP请求,并指定该HTTP请求的方法. ...

  4. Android-----工程文件目录介绍

  5. JAVA创建并写入内容到xlsx文件

    首先需要在web项目中导入jxl.jar 包 //action中代码 public String downloadReport(){        String path = System.getPr ...

  6. Daily Scrum 10.31

    今天是万圣节,也是编译课程设计第一次作业截至的日子,但由于大家对时间的合理安排,我们还是完成了一定的任务量. 下面是今天的Task统计: 不仅燃尽图和燃速图出不来,连那个所有迭代状态的图也出不来了.. ...

  7. c# 递归

    递归 函数体内调用自身函数,直到符合某一条件时不再继续调用两个需要满足的条件1.有反复调用自身函数的过程2.有函数的出口,有不再继续执行的条件 练习: 1.用递归函数做n的阶乘. 2.一群羊赶到村庄去 ...

  8. jQuery cdn使用介绍

    如果您不希望下载并存放jQuery,那么也可以通过 CDN(内容分发网络)引用它,下面是具体实现,有类似需求的各位可以参考下哈,希望对你有所帮助   如果您不希望下载并存放 jQuery,那么也可以通 ...

  9. 重新初始化RAC的OCR盘和Votedisk盘,修复RAC系统

    假设我们的RAC环境中OCR磁盘和votedisk磁盘全部被破坏,并且都没有备份,那么我们该如何恢复我们的RAC环境.最近简单的办法就是重新初始化我们的ocr盘和votedisk盘,把集群中的所有相关 ...

  10. 2016HUAS暑假集训训练题 F - 简单计算器

    Description 读入一个只包含 +, -, *, / 的非负整数计算表达式,计算该表达式的值.    Input 测试输入包含若干测试用例,每个测试用例占一行,每行不超过200个字符,整数和运 ...