html5 input step,HTML5 Data Input 元素介绍
我们在网页中经常要使用到日期时间选择器。通常这些效果都是由一些jQuery插件来完成,但是HTML5为我们提供了一个元素的data输入框。这个data元素可以完成日期的输入,并且它的浏览器兼容性非常好,很可惜的是Firefox和Safari浏览器目前还不支持这个元素。
data输入框的基本HTML结构可以像下面这样:
出版日期:
在你的浏览器中,可以得到下面的结果:
出版日期:
data输入框的外观和语言取决于浏览器。可以使用value属性为它设置一个默认值。在不支持data元素的浏览器中,会将它简单的渲染为一个普通的输入框,添加一个placeholder属性,可以在不支持的浏览器中直接显示出这个日期。
DATA元素的日期范围
一般一个日期选择器会允许用户选择某个时间范围的日期。data输入框元素默认允许选择完整的日期范围。我们可以通过max和min属性来限制某个时间范围。
得到的结果如下:
data输入框中的值可以通过PHP或javascript来动态改变。
使用PHP来限制日期选择范围
我们可以在value、min和max属性中使用PHP代码来调用日期,这样所有的日期都会动态更新。
" value="=date('Y-m-d')>" >
上面的代码将设置max属性为比当前日期多7天。
使用JAVASCRIPT来限制日期选择范围
我们也可以使用javascript来做同样的事情:
function convertToISO(timebit) {
timebit.setHours(0, -timebit.getTimezoneOffset(), 0, 0);
// remove GMT offset
var isodate = timebit.toISOString().slice(0,10);
// format convert and take first 10 characters of result
return isodate;
}
var bookdate = document.getElementById('bookdate');
var currentdate = new Date();
bookdate.min = convertToISO(currentdate);
bookdate.placeholder = bookdate.min;
var futuredate = new Date();
futuredate.setDate(futuredate.getDate() + 7);
// go forward 7 days into the future
bookdate.max = convertToISO(futuredate);
使用step属性限制日期选择范围
我们HIA可以通过step属性来限制时间范围。step属性设置为2的话,日期只能在两天内来回选择。step属性设置为7,可以在一个星期的时间范围内进行选择。
使用Datalist来限制日期选择范围
你还可以通过元素来限制某个有效的时间范围。在元素中,每一个都关联一个可用的日期。下面的代码中,元素是可选的,它用于一些提示信息:
法定节假日
2015-01-01
2015-05-01
2015-10-01
2016-02-08
得到的结果如下:
法定节假日
2015-01-01
2015-05-01
2015-10-01
2016-02-08
自定义Data的样式
我们在自定义data元素的样式的时候有很多局限性。和HTML5 color元素一样,data元素的UI外观样式取决于底层的操作系统和浏览器。在IOS8系统中的data元素组件的样式和桌面浏览器中的样式是完全不同的。
Chrome浏览器允许我们使用Shadow DOM伪元素来修改data元素的外观。
input[type=date] { border: none; width: 18rem; background: black; color: #fff; padding: 1rem; font-size: 1.4rem; }
::-webkit-datetime-edit { font-size: 1.4rem; }
::-webkit-datetime-edit-fields-wrapper { padding: 1rem; }
::-webkit-datetime-edit-text { color: red; padding: 0 0.5em; }
::-webkit-datetime-edit-month-field { color: blue; }
::-webkit-datetime-edit-day-field { color: green; }
::-webkit-datetime-edit-year-field[aria-valuetext=blank] { color: white; }
::-webkit-datetime-edit-year-field { color: purple; }
::-webkit-inner-spin-button { display: none; }
::-webkit-clear-button {
display: none; -webkit-appearance: none;
}
::-webkit-calendar-picker-indicator {
background: none; color: red;
font-size: 2rem; margin-right: 1rem; transition: .4s;
}
::-webkit-calendar-picker-indicator:hover { color: yellow; }
得到的结果如下:
上面的代码纤维所有的浏览器指定data元素的统一样式,在为Webkit内核的浏览器指定特别的样式。
如果你需要能完全控制日期选择器的外观和行为,建议你使用jQueryUI或其它的一些框架。
小结
HTML5还有一些和data相关的元素,如month、week和datetime-local等。data实际上就是一个日期选择器组件,通过data元素,我们可以设置某个范围的日期让用户可以进行选择。希望以上内容对你有所帮助!
html5 input step,HTML5 Data Input 元素介绍相关推荐
- 跟KingDZ学HTML5之九 HTML5新的 Input 种类
好了,我们这节课讲解的可能有些难以测试,因为目前很多浏览器都不支持,这些新增加的标签,我也只能,尽可能的去找支持的浏览器给大家测试展示效果. HTML5中新增加了很多 Input 的种类. 1.&l ...
- html元素data属性设置变量,HTML5 自定义属性 data-* 和 jQuery.data 详解
编辑注:HTML中使用data-xx="xx"开头标记的属性到底有什么用,直接使用xx="xx"不是更简单吗?其实data-xx是HTML5的一个属性,支持通过 ...
- 下面是html5中新增的结构元素的是,HTML5的新的结构元素介绍
HTML5的新的结构元素介绍 一.HTML5与HTML4的区别 1. 取消了一些过时的HTML4的标签 其中包括纯粹显示效果的标记,如和 ,它们已经被 CSS完全取代. 其他取消的属性:acronym ...
- HTML5的新的结构元素介绍
HTML5的新的结构元素介绍 一.HTML5与HTML4的区别 1. 取消了一些过时的HTML4的标签 其中包括纯粹显示效果的标记,如<font>和<center>,它们已经被 ...
- html5 datalist属性,HTML5 元素 datalist 介绍
元素介绍 想象一下我们想要用户输入一个字符串,例如他们的名字,我们可能会用到元素,这样子用户就可以随意的输入他们的内容.想象一下假如我们需要用户输入的是他们的国家居住地,我们更喜欢使用元素,这个将会限 ...
- HTML5 学习总结(二)——HTML5新增属性与表单元素
一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html><head>< ...
- 哪一个不是html5新增的语义化标记元素,东师19春《HTML5开发基础与应用》作业考核【标准答案】...
<HTML5开发基础与应用>作业考核-0001 试卷总分:100 得分:0 一. 单选题 (共 30 道试题,共 60 分) 1.关于cookie存储机制下列说法不正确的是: A.简 ...
- Html5中新增的表单元素详解
HTML5 的新的表单元素: HTML5 拥有若干涉及表单的元素和属性. •datalist •keygen •output datalist 元素 datalist 元素规定输入域的选项列表.列表是 ...
- 有关Data Input类组件的研究——Silverlight学习笔记[26]
Data Input(数据输入)类在Silverlight的应用中是十分常见的.Data Input类组件共有三个组件构成:DescriptionViewer(描述显示).Label(标签)以及Val ...
- html5做一个相册_HTML5最新版本介绍
HTML5是HTML4.01和XHTML1.0之后超文本标记语言的最新版本,由一群自由思想者设计,最终实现了多媒体支持.交互性.更智能的表单和更好的语义标注. HTML 5不只是 HTML规范的最新版 ...
最新文章
- return 返回部分值
- 在大数据时代,我们需要数据售货员
- JavaScript学习知识点归纳
- 201521123052《Java程序设计》第7周学习总结
- mysql数据没有同步更新_解决MySQL的主从数据库没有同步的两种方法
- 【计算机网络】分组交换网中的时延,丢包和吞吐量
- 如何避免用动态语言的思维写Go代码
- stm8s103k3 周期 捕获_基于stm8s103k3单片机串口UART的正确使用分享
- php 后天的时间戳,Linux中时间戳转换命令
- R|广义线性模型知识点归纳
- 深度理解 RGMII (包含Linux和realtek)
- 使用简单的神经网络实现区分鸢尾花类别
- Java指导书练习题——抽象类
- 小猿圈分享适合零基础学python的书籍
- mac彻底卸载idea
- OutputStream的flush()方法
- 【WebLogic使用】3.WebLogic配置jndi数据源
- 文件夹里的文件怎么批量打印呢?
- 关于存储优化型实例和大型数据仓库EC2实例选型
- 香港网络新危机:黑客入侵网上银行账户买卖股票
热门文章
- Echarts 单一柱状图显示不同颜色
- 华为手机鸿蒙系统手机_华为推出鸿蒙系统2.0 明年华为手机将适配支持
- 网络流——基础,Dinic和Sap(Gap优化)算法
- python卡尔曼滤波室内定位_基于卡尔曼滤波的室内定位方法设计
- 【手撕算法】PatchMatch图像修复算法C++实现
- CentOS7安装配置MongoDB4.4.4踩坑
- 国内首家!携程周三、周五可在家“躺平”:76%员工主动报名 !网友:我酸了...
- 腾讯社交广告大赛 —— 特征与模型介绍
- [开源] PLC梯形图转指令表的算法源代码
- ubuntu服务器系统进入安全模式,ubuntu bios 无法进入安全模式