我写移动端的页面会用到MUI这个框架,个人觉得挺好用的,有很多实用的UI组件。当然坑还是有的,http://dev.dcloud.net.cn/mui/ui/ MUI官网,有兴趣的小伙伴可以看看
虽然MUI也有自带的日历控件,但后台同事反映和后台数据交互起来比较麻烦,然后我就想到了用H5 input类型date属性。
使用H5 input类型的date属性,添加<input type="month" name="" />(显示年月)即可,会直接调用IOS和安卓手机上自带的本地日历控件。虽然H5的很多新属性在PC端的某些浏览器还不能很好的支持,同一个属性不同的浏览器可能解析也不一样;但移动端对H5的属性支持还是不错的,不用考虑太多浏览器的问题,主要就是IOS和安卓的适配。
更多 H5 Input 类型请参考:http://www.w3school.com.cn/html5/html_5_form_input_types.asp
注:使用H5 input date 属性以后还需要给确定按钮绑定change事件。这是因为点击日期以后,弹出日历选框(下图蓝色框部分),想等用户选择一个日期,选择确定以后在显示(下图红色框部分)同时把相应的数据加载出来,但是现在点了以后,弹出的选框(下图蓝色框部分)在滚动选择日期时候,(下图红色框部分)也会同步显示选择的日期,这样每次都会加载数据,造成不必要的请求,从而导致加载缓慢。
注:使用MUI的日历组件没有这个问题,下面随意滚动选择日期,上面的日期也不会变,等你点击确认以后才会变。
IOS和安卓手机调用自带本地日历控件显示的样式是不一样的,这个也没办法统一,如果想要统一的样式,那就只有找其他插件来代替了
推荐:https://github.com/xfhxbb/lCalendar 这个博主写的日历插件,不依赖任何库,体积小(压缩过的js文件大概10多KB),使用简单。
注:如果需要统一IOS和安卓的日历控件样式,推荐使用 My97DatePicker(日期选择插件)
之前我也写过一篇相关博客:http://www.cnblogs.com/tu-0718/p/6920408.html
IOS本地调用日历控件截图:
安卓本地调用日历控件截图:
补充说明:如果使用了H5 input的date属性,经本人测试在IOS上没有什么问题,但是系统比较老的安卓手机上会出现设置了<input type="month" />属性时,依然会显示年月日,如下截图:
如果要兼容这些老版本系统的安卓手机,我能想到的办法还是只有用插件,上面我推荐的那个博主写的插件可以解决这个问题,如果哪位大神有更好的办法欢迎留言给予指点
注:使用了H5 input date属性以后,如果是在浏览器上(比如谷歌)查看显示效果的话,是这样的(如下图);但不要担心,实际经本人测试在手机上查看的时候,(IOS和安卓手机)显示的是我上面截图的效果
使用MUI的日期控件引起的探索——HTML5 input类型date属性的更多相关文章
-
mui 时间日期控件(浏览器上无法查看,在手机端可以点击)
<head> <meta charset="utf-8"> <meta name="viewport" content=" ...
-
my97日期控件
http://www.seabroad.cn/cq/datepick/demo.htm 但是由于某些原因,担心这个网站不稳定,所以复制一下 一. 简介 1. 简介 目前的版本是:4.0 Prerele ...
-
jsp日期插件My97DatePicker 强大的日期控件 使用方便简单
本文属转载(希望对编程爱好者有所帮助)详情请访问官方网站 http://www.my97.net/dp/index.asp 一. 简介 1. 简介 目前的版本是:4.7 2. 注意事项 My97Dat ...
-
日期控件My97DatePicker的使用
一. 简介 1. 简介 目前的版本是:4.8 2. 注意事项 My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名 My97DatePicker.h ...
-
Wdatepicker日期控件的使用指南 (转)
Wdatepicker日期控件的使用指南 标签: inputclass语言functionstring正则表达式 2012-02-10 15:48 40826人阅读 评论(5) 收藏 举报 .embo ...
-
WEB日期控件
http://www.cnblogs.com/jiangbei/p/7270788.html 日期控件——my97 <div class="form-group"> ...
-
Wdatepicker日期控件的使用指南
示例2-3-1 起始日期简单应用 示例2-3-2 alwaysUseStartDate属性应用 示例2-3-3 使用内置参数 示例 2-4-1: 年月日时分秒 示例 2-4-2 时分秒 示例 2-4- ...
-
Jquery + css 日期控件用法实例.zip
/*==============================================================================** Filename:common.j ...
-
jsp日期插件My97DatePicker 强大的日期控件 使用方便简单(转)
本文属转载(希望对编程爱好者有所帮助)详情请访问官方网站 http://www.my97.net/dp/index.asp 一. 简介 1. 简介 目前的版本是:4.7 2. 注意事项 My97Dat ...
随机推荐
-
为Sharepoint 2010 批量创建SharePoint测试用户
无意搜到下面一篇文章,http://www.cnblogs.com/lambertqin/archive/2012/04/19/2457372.html,原作者写的太"高大上",可 ...
-
词法分析 after Coding
学习词法分析,认为词法分析很难. 虽然不懂,但是要完成作业. 去图书馆或者看书借鉴代码,修改错误,让代码正常运行. 学习词法分析后,了解到自己有很多的不足: 1.代码不是很熟练,课本知识不了解.知识面 ...
-
VS2008/MFC —常用控件使用总结 转载
在公司培训期间,经理给了我们没人10个界面草图,让我们在VS2008下使用MFC设计,因为在经理的帮助和自己的努力下,终于在三天时间内完成,现在就根据在这三天 时间里所用到的控件做出如下总结: 1.D ...
-
JSCover+WebDriver/Selenium获得JS
代码覆盖
我们看JSCover(http://tntim96.github.io/JSCover/manual/manual.xml)介绍及使用说明的时候,往往被图形界面所吸引.这样的方式比較适合手工操作,点击 ...
-
MVC-1(javabean+jsp+servlet+jdbc)
这是一篇最初版本的mvc设计模式的demo.路要一步一步走,弄明白这其中的逻辑,对后面掌握ssh,ssm等框架大有裨益. 计算机系的同学们也要为毕设做准备了,希望可以帮你们迈出自己做毕设的第一步(微笑 ...
-
能ping通虚拟机,但snmp报文 Destination unreachable(Host administratively prohibited
如题目,使用virtual box 虚拟机,虚拟机系统为centos6.5, 主机系统为win10 内外设置ip在同一网段后,互相能ping通,centos 系统开启snmp服务,此处说明以下, sn ...
-
SQL Server进阶 窗口函数
概述 设计窗口函数目的? 在开窗函数出现之前存在着很多用 SQL 语句很难解决的问题,很多都要通过复杂的相关子查询或者存储过程来完成. 为了解决这些问题,在 2003 年 ISO SQL 标准加入了 ...
-
Backup and Recovery Types
Physical(Raw) and Logical Backup: 1.Physical backups consist of raw copies of the directories and fi ...
-
Maven 打jar包,pom文件配置
以下是pom.xml文件的相关配置. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="h ...
-
hdu2060-2062
hdu 2060 斯诺克,读懂题意直接模拟 #include<stdio.h> int main(){ int N; ]; a[]=; ;i<=;i++){ a[i]=(-i)*i/ ...