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

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

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

请选择日期和时间: 

截图:

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/490785.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python 中 yield 的使用

python中yield在函数中的使用 正是因为函数含有这个yield&#xff0c;所以&#xff0c;该函数不再是普通的函数&#xff0c;而是生成器函数&#xff08;generator function&#xff09;。下面通过小例子来说明一下这个内置函数的特性&#xff1a; 1、直接运行函数并不会执行。…

支付接口申请_2020新版去水印小程序搭建教程(附源码+对接支付)

可以设置小程序跳转&#xff0c;引流也不错支持小程序后台流量主激励视频广告用户下载一次观看一次视频广告&#xff0c;收入非常可观支持小程序后台流量主banner广告支持全网短视频解析&#xff0c;苹果安卓通用支持后台无限生成卡密支持自定义文字广告支持图片广告支持小程序…

python 绘制功率谱密度图 plt.psd

功率谱密度图以横轴为频率&#xff0c;纵轴为功率密度&#xff0c;表示信号功率密度随着频率的变化情况 python绘制功率谱密度&#xff1a; matplotlib.pyplot.psd(x, NFFT256, Fs2, Fc0, detrendmlab.detrend_none,windowmlab.window_hanning, noverlap0, pad_toNone,sidesd…

概述自动机器学习(AutoML)

来源&#xff1a;混沌巡洋舰华为年薪百万招聘的机器学习博士&#xff0c;其中一个的研究方向就是AutoML,今天借着最新的综述&#xff0c;来对AutoML进行简要的概述。机器学习是让算法自动的从数据中找出一组规则&#xff0c;从而提取数据中对分类/聚类/决策有帮助的特征&#x…

python assert 与 slice

assert&#xff1a; assert 断言的作用&#xff1a;assert是断言的意思&#xff0c;python assert 断言语句格式及用法很简单。assert断言是声明其布尔值必须为真的判定&#xff0c;如果发生异常就说明表达式为假&#xff0c;用来测试表达式&#xff0c;如果表达式的返回值为假…

linux-ntpdate同步更新时间

Linux服务器运行久时&#xff0c;系统时间就会存在一定的误差&#xff0c;一般情况下可以使用date命令进行时间设置&#xff0c;但在做数据库集群分片等操作时对多台机器的时间差是有要求的&#xff0c;此时就需要使用ntpdate进行时间同步 安装&#xff1a; yum install ntpdat…

卸载52好压,极速输入法,手机模拟大师这些流氓软件

卸载52好压&#xff0c;极速输入法的方法&#xff1a; 通过控制面板里卸载了之后发现这两个流氓软件居然还在&#xff1f;于是换了一种卸载方法&#xff1a; 先在官网下载并重新安装这两个软件&#xff0c;如果电脑已经安装了旧版本会提示安装的新版本会覆盖旧的版本&#xf…

h5 bootstrap 小程序模板_软件测试人员必知H5/小程序测试点

最近接触了较多关于H5页面的测试&#xff0c;H5页面的测试除了业务逻辑功能测试外&#xff0c;其他部分的测试方法基本是可以通用的,在此对H5页面和小程序的一些通用测试方法进行总结分享给大家01H5相关测试H5优势&#xff1a;1.H5可以跨平台&#xff0c;开发成本相对较低&…

【深度学习】这才是深度学习的本源

内容来源&#xff1a;2019年7月26日&#xff0c;在长城会主办的“GMIC之院士AI论坛”上&#xff0c;索尔克生物研究所计算神经生物学实验室主任特伦斯进行了以“人工智能&#xff0c;将成科技的最大风口”为主题的精彩分享。笔记侠作为合作方&#xff0c;未经主办方和讲者审核。…

KALI Linux中GURB安装失败如何处理

KALI Linux中GURB安装失败如何处理 # GRUB安装失败 # 无法将grub-pc软件包安装到/target/中&#xff0c;如果没有GRUB启动引导器&#xff0c;所安装的系统将无法启动。 解决办法&#xff1a; 点击返回 点击配置软件包管理 将之前设置的网络镜像“是”改为“否”&#xff0c…

IEEE选择和下载投稿期刊模板(LaTeX和Word)网站

https://template-selector.ieee.org/ &#xff08;复制网址在新标签页打开&#xff0c;不要直接点&#xff09;

d3.js 旋转图形_苏教版三年级数学上册6.1平移和旋转微课视频 | 练习

本公众号学习资源丰富&#xff01;欢迎分享到班群、朋友圈、帮助更多孩子。微课视频第一课时微课视频第二课时同步练习1.连一连。升旗时国旗的运动 钟摆的运动风扇叶片的运动 平移 电梯的运动光盘在电脑里的运动 旋转 火车的…

任正非签发最新电邮:过去我们是为了赚点小钱,现在是要战胜美国

来源&#xff1a;蓝血研究&#xff08;lanxueyanjiu&#xff09;2019年7月31日&#xff0c;华为举行“千疮百孔的烂伊尔2飞机”战旗交接仪式&#xff0c;任正非在仪式上做了题为《钢铁是怎么炼成的》的讲话。他表示&#xff1a;人工智能才是未来的大产业&#xff0c;要让“人才…

wget for windows 下载与安装

wget for windows 下载与安装 wget for windows 下载链接&#xff1a;https://eternallybored.org/misc/wget/ 下载之后将压缩包内的wget.exe文件解压到下面的路径&#xff08;注意所下载文件与个人电脑匹配&#xff08;32bit或64bit&#xff09;&#xff09; C:\Windows\Sys…

CTF中的EXP编写技巧 zio库的使用

zio库没有提供文档 这个是官方给出的一个例子程序 1 from zio import *2 io zio(./buggy-server)3 # io zio((pwn.server, 1337))4 5 for i in xrange(1337):6 io.writeline(add str(i))7 io.read_until(>>)8 9 io.write("add TFpdp1gL4Qu4aVCHUF6AY5Gs…

C语言定义外部变量或函数使得另一个C文件可以调用

比如要在b.c想要调用a.c里的变量aa或函数aaa&#xff0c;则需要将a.c里的变量aa和函数aaa设置为外部变量和函数 方法&#xff1a; 在a.h中声明aa变量和aaa函数&#xff1a; extern int aa;extern void aaa(void); 然后在a.c中定义aa变量和aaa函数(注意不用extern关键字)&am…

case when 多条件_3年前的设计如今被iPhone强推 PITAKA磁吸生态设计的前瞻性到底有多可怕?...

随着iPhone12/Pro的陆续出货,很多人已经上手并在实际的生活和工作场景下体验过iPhone12。其中iPhone12系列的全新卖点MagSafe技术备受关注,其极为出色的磁性机制可实现全新的配件生态系统,为配件制造商开启了一个全新的细分市场。新技术的诞生必然带来新一波的设计趋势,配件制造…

BAT文件命名中含有英文括号运行出错

BAT文件命名中含有英文括号运行出错 近期在写一些批处理程序&#xff0c;但在命名时发现了一些问题&#xff0c;BAT文件名中含有英文圆括号时&#xff0c;批处理程序就会执行错误&#xff0c;去除英文圆括号后&#xff0c;程序就能正常执行。 测试一下&#xff1a; 1、先生成…

美国新登月计划有何不一样

来源&#xff1a;新华社新华社华盛顿8月10日电&#xff08;记者周舟&#xff09;在人类登月50年后&#xff0c;美国航天局开始紧锣密鼓地研制新一代重型火箭和“猎户座”飞船&#xff0c;计划2024年前再次将宇航员送上月球。为何不直接采用当年“阿波罗11号”的设计再赴月球&am…

浅谈对px em rem的理解

px: pc端最常用的的单位&#xff0c;大小固定&#xff0c;不会随窗口的变化而变化 例子&#xff1a; .box{width:100px; height:100px; font-size: 16px; border:1px solid #000;} 设置此元素的长款各为100px(像素)&#xff0c;边框为1px(像素) 实线 边框为黑色 元素内字体大小…