zoukankan      html  css  js  c++  java
  • 使用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和安卓手机)显示的是我上面截图的效果

  • 相关阅读:
    设计模式复习笔记08
    Docker Dockerfile 指令详解与实战案例
    Docker数据管理与挂载管理
    Docker简介与安装
    Xshell如何配置并远程连接Linux服务器详解
    如何VMware创建Linux虚拟机并设置虚拟机网络
    自动化运维工具Ansible之LNMP实践环境部署
    自动化运维工具Ansible之Roles角色详解
    自动化运维工具Ansible之Tests测验详解
    Ansible Jinja2 模板使用
  • 原文地址:https://www.cnblogs.com/tu-0718/p/6729274.html
Copyright © 2011-2022 走看看