使用MUI的日期控件引起的探索——HTML5 input类型date属性

我写移动端的页面会用到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属性

最新文章

热门文章