本文探讨了在移动端开发中，使用HTML5的input类型date属性与MUI框架的日历控件的优缺点。H5的date属性在移动端有良好的支持，可以直接调用设备的本地日历，但可能在某些旧版安卓系统上存在问题。相比之下，MUI的日历组件在交互上有更好的表现。文章还推荐了My97DatePicker作为统一样式的选择，并提供了不同设备上日历控件的截图示例。
我写移动端的页面会用到MUI这个框架，个人觉得挺好用的，有很多实用的UI组件。当然坑还是有的，
虽然MUI也有自带的日历控件，但后台同事反映和后台数据交互起来比较麻烦，然后我就想到了用H5 input类型date属性。
使用H5 input类型的date属性，添加(显示年月)即可，会直接调用IOS和安卓手机上自带的本地日历控件。虽然H5的很多新属性在PC端的某些浏览器还不能很好的支持，同一个属性不同的浏览器可能解析也不一样；但移动端对H5的属性支持还是不错的，不用考虑太多浏览器的问题，主要就是IOS和安卓的适配。
注：使用H5 input date 属性以后还需要给确定按钮绑定change事件。这是因为点击日期以后，弹出日历选框(下图蓝色框部分)，想等用户选择一个日期，选择确定以后在显示(下图红色框部分)同时把相应的数据加载出来，但是现在点了以后,弹出的选框(下图蓝色框部分)在滚动选择日期时候，(下图红色框部分)也会同步显示选择的日期，这样每次都会加载数据，造成不必要的请求，从而导致加载缓慢。
注：使用MUI的日历组件没有这个问题，下面随意滚动选择日期，上面的日期也不会变，等你点击确认以后才会变。
IOS和安卓手机调用自带本地日历控件显示的样式是不一样的，这个也没办法统一，如果想要统一的样式，那就只有找其他插件来代替了
推荐：
注：如果需要统一IOS和安卓的日历控件样式，推荐使用 My97DatePicker(日期选择插件)
IOS本地调用日历控件截图：
安卓本地调用日历控件截图：
补充说明：如果使用了H5 input的date属性，经本人测试在IOS上没有什么问题，但是系统比较老的安卓手机上会出现设置了属性时，依然会显示年月日，如下截图：
如果要兼容这些老版本系统的安卓手机，我能想到的办法还是只有用插件，上面我推荐的那个博主写的插件可以解决这个问题，如果哪位大神有更好的办法欢迎留言给予指点
注：使用了H5 input date属性以后，如果是在浏览器上(比如谷歌)查看显示效果的话，是这样的(如下图)；但不要担心，实际经本人测试在手机上查看的时候，(IOS和安卓手机)显示的是我上面截图的效果
mui 时间日期控件(浏览器上无法查看,在手机端可以点击)
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
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 ...
随机推荐
Javascript学习笔记：闭包题解(1)
代码: function createFunctions(){ var result=[]; for(var i=0;i<10;i++){ result[i]=function(){ retur ...
苹果手机 微信调用百度地图Javascript API 频繁闪退问题
最近在网页中调用百度地图API js大众版,但是在IOS8系统中,缩放的时候频繁闪退,安卓手机没有这个问题! 在网上查询了下,有网友回答说不要频繁的去new marker,而是初始化话一定量的mark ...
HDU 1164 Eddy&;#39;s research I【素数筛选法】
思路:将输入的这个数分成n个素数的相乘的结果,用一个数组存储起来.之后再输出就能够了 Eddy's research I Time Limit: 2000/1000 MS (Java/Others) ...
[POJ 3487]The Stable Marriage Problem
Description The stable marriage problem consists of matching members of two different sets according ...
Linux系统安装和网络配置
系统下载 CentOS 6.x 50% 6.9 ---- 常用 CentOS 7.x 50% 7.2 ----常用 官网-国外 https://wiki.centos.org/Downloa ...
Linux LVM磁盘管理
几个概念: PV:物理卷,指LVM的基本逻辑卷,包含LVM的基本参数,如/dev/sdb1等. VG:卷组,类似于非LVM的硬盘,由多个PV组成. LV:逻辑卷,类似于非LVM硬盘中的分区. PE:物 ...
docker镜像的创建commit及dockerfile
在docker 1.3版本以前使用attach进入容器会经常出现卡死的情况,之后官方退出了exec命令,从宿主机进入,但是从其他远程主机进入使用ssh服务来维护是用户熟悉的方法.所以这里来创建一个带有 ...
aspectj 表达式 execution切点函数
execution函数用于匹配方法执行的连接点,语法为: execution(方法修饰符(可选) 返回类型 方法名(参数) 异常模式(可选)) 参数部分允许使用通配符: * 匹配任意字符,但只能匹配 ...
zip压缩类
using System; using System.Collections.Generic; using System.Text; using System.Text.RegularExpressi ...
Java基础整理
一.Java中的遍历 1.在java开发中会碰到遍历List删除其中多个元素的情况,如果使用一般的for循环以及增强的for循环,代码会抛出异常ConcurrentModificationExcept ...
扫一扫
1003
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
