标签在HTML5中新增了color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel 以及 url新属性。
本篇记录在开发中使用date属性,遇到的一些问题,以及功能扩展:
html:
js:
限制日期框选择范围
利用标签属性实现
max:可选最大日期
min:可选最小日期
js设置最大只能选择到当前日期
html
js
移动端显示问题
当移动端使用nput[type="date"]时 ios系统日历格式是这样 ===> 2019年06月06日
样式上安卓和ios不统一
为了实现样式统一可以利用input[type="text"]代替日历控件,显示选择的日期
html
css
/* 日期控件样式 */ .date-input-box{ position: relative; display: inline-block; } .data{ width: 100px; height: 24px; padding: 0 5px; line-height: 24px; } .dateInput{ position: absolute; left: 0;right: 0; z-index: 10; opacity: 0; } .selectIcon { position: absolute; top: 50%; transform: translateY(-50%); right: 10px; width: 3px; height: 0; border-top: 4px solid #999; border-left: 4px solid transparent; border-right: 4px solid transparent; z-index: 8; }
js
将 " - " 替换成 "/ "
//dataInput=dataInput.replace(/-/g,"/");
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/104721.html
标签在HTML5中新增了color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel 以及 url新属性。本篇记录在开发中使用date属性,遇到的一些问题,以及功能扩展: 获取当前日期,并显示在input[type=date]上 html: js: $(function(...
标签在HTML5中新增了color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel 以及 url新属性。本篇记录在开发中使用date属性,遇到的一些问题,以及功能扩展: 获取当前日期,并显示在input[type=date]上 html: js: $(function(...
标签在HTML5中新增了color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel 以及 url新属性。本篇记录在开发中使用date属性,遇到的一些问题,以及功能扩展: 获取当前日期,并显示在input[type=date]上 html: js: $(function(...
fastclick.js?bf9a:331 Uncaught DOMException: Failed to execute setSelectionRange on HTMLInputElement: The input elements type (number) does not support selection 解决方法: 找到node_module中的文件fastclick.js, l...
摘要:先贴官方文档链接作为一个候选的建议方案,尚未定稿,即未被完全认可,还处于不断更新的状态,截至目前为止,的最新版本是年月版。事实上,并不需要有值,直接用即可。属性实际上指的就是该接受的文件类型,如,等,另外,也可以用来代替全选,如。 先贴W3C官方文档链接:http://www.w3.org/TR/html-media-capture HTML Media Capture作为一个候选的建...
阅读 2018·2021-11-25 09:43
阅读 1027·2021-09-26 09:47
阅读 2745·2019-08-30 15:52
阅读 1708·2019-08-30 15:44
阅读 821·2019-08-30 10:58
阅读 556·2019-08-29 18:43
阅读 3082·2019-08-29 18:36
阅读 2204·2019-08-29 17:02