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

时间:2022-01-11 02:38:43

我写移动端的页面会用到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的日期控件引起的探索——HTML5 input类型date属性

注:使用MUI的日历组件没有这个问题,下面随意滚动选择日期,上面的日期也不会变,等你点击确认以后才会变。

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

IOS和安卓手机调用自带本地日历控件显示的样式是不一样的,这个也没办法统一,如果想要统一的样式,那就只有找其他插件来代替了

推荐https://github.com/xfhxbb/lCalendar 这个博主写的日历插件,不依赖任何库,体积小(压缩过的js文件大概10多KB),使用简单。

注:如果需要统一IOS和安卓的日历控件样式,推荐使用 My97DatePicker(日期选择插件)

之前我也写过一篇相关博客:http://www.cnblogs.com/tu-0718/p/6920408.html

IOS本地调用日历控件截图:

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

安卓本地调用日历控件截图:

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

补充说明:如果使用了H5 input的date属性,经本人测试在IOS上没有什么问题,但是系统比较老的安卓手机上会出现设置了<input type="month" />属性时,依然会显示年月日,如下截图:

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

如果要兼容这些老版本系统的安卓手机,我能想到的办法还是只有用插件,上面我推荐的那个博主写的插件可以解决这个问题,如果哪位大神有更好的办法欢迎留言给予指点

 

注:使用了H5 input date属性以后,如果是在浏览器上(比如谷歌)查看显示效果的话,是这样的(如下图);但不要担心,实际经本人测试在手机上查看的时候,(IOS和安卓手机)显示的是我上面截图的效果

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

使用MUI的日期控件引起的探索——HTML5 input类型date属性的更多相关文章

  1. mui 时间日期控件&lpar;浏览器上无法查看&comma;在手机端可以点击&rpar;

    <head> <meta charset="utf-8"> <meta name="viewport" content=&quot ...

  2. my97日期控件

    http://www.seabroad.cn/cq/datepick/demo.htm 但是由于某些原因,担心这个网站不稳定,所以复制一下 一. 简介 1. 简介 目前的版本是:4.0 Prerele ...

  3. jsp日期插件My97DatePicker 强大的日期控件 使用方便简单

    本文属转载(希望对编程爱好者有所帮助)详情请访问官方网站 http://www.my97.net/dp/index.asp 一. 简介 1. 简介 目前的版本是:4.7 2. 注意事项 My97Dat ...

  4. 日期控件My97DatePicker的使用

    一. 简介 1. 简介 目前的版本是:4.8 2. 注意事项 My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名 My97DatePicker.h ...

  5. Wdatepicker日期控件的使用指南 &lpar;转&rpar;

    Wdatepicker日期控件的使用指南 标签: inputclass语言functionstring正则表达式 2012-02-10 15:48 40826人阅读 评论(5) 收藏 举报 .embo ...

  6. WEB日期控件

    http://www.cnblogs.com/jiangbei/p/7270788.html 日期控件——my97 <div class="form-group">   ...

  7. Wdatepicker日期控件的使用指南

    示例2-3-1 起始日期简单应用 示例2-3-2 alwaysUseStartDate属性应用 示例2-3-3 使用内置参数 示例 2-4-1: 年月日时分秒 示例 2-4-2 时分秒 示例 2-4- ...

  8. Jquery &plus; css 日期控件用法实例&period;zip

    /*==============================================================================** Filename:common.j ...

  9. jsp日期插件My97DatePicker 强大的日期控件 使用方便简单&lpar;转&rpar;

    本文属转载(希望对编程爱好者有所帮助)详情请访问官方网站 http://www.my97.net/dp/index.asp 一. 简介 1. 简介 目前的版本是:4.7 2. 注意事项 My97Dat ...

随机推荐

  1. 为Sharepoint 2010 批量创建SharePoint测试用户

    无意搜到下面一篇文章,http://www.cnblogs.com/lambertqin/archive/2012/04/19/2457372.html,原作者写的太"高大上",可 ...

  2. 词法分析 after Coding

    学习词法分析,认为词法分析很难. 虽然不懂,但是要完成作业. 去图书馆或者看书借鉴代码,修改错误,让代码正常运行. 学习词法分析后,了解到自己有很多的不足: 1.代码不是很熟练,课本知识不了解.知识面 ...

  3. VS2008&sol;MFC —常用控件使用总结 转载

    在公司培训期间,经理给了我们没人10个界面草图,让我们在VS2008下使用MFC设计,因为在经理的帮助和自己的努力下,终于在三天时间内完成,现在就根据在这三天 时间里所用到的控件做出如下总结: 1.D ...

  4. JSCover&plus;WebDriver&sol;Selenium获得JS 代码覆盖

    我们看JSCover(http://tntim96.github.io/JSCover/manual/manual.xml)介绍及使用说明的时候,往往被图形界面所吸引.这样的方式比較适合手工操作,点击 ...

  5. MVC-1&lpar;javabean&plus;jsp&plus;servlet&plus;jdbc&rpar;

    这是一篇最初版本的mvc设计模式的demo.路要一步一步走,弄明白这其中的逻辑,对后面掌握ssh,ssm等框架大有裨益. 计算机系的同学们也要为毕设做准备了,希望可以帮你们迈出自己做毕设的第一步(微笑 ...

  6. 能ping通虚拟机,但snmp报文 Destination unreachable&lpar;Host administratively prohibited

    如题目,使用virtual box 虚拟机,虚拟机系统为centos6.5, 主机系统为win10 内外设置ip在同一网段后,互相能ping通,centos 系统开启snmp服务,此处说明以下, sn ...

  7. SQL Server进阶 窗口函数

    概述  设计窗口函数目的? 在开窗函数出现之前存在着很多用 SQL 语句很难解决的问题,很多都要通过复杂的相关子查询或者存储过程来完成. 为了解决这些问题,在 2003 年 ISO SQL 标准加入了 ...

  8. Backup and Recovery Types

    Physical(Raw) and Logical Backup: 1.Physical backups consist of raw copies of the directories and fi ...

  9. Maven 打jar包,pom文件配置

    以下是pom.xml文件的相关配置. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="h ...

  10. hdu2060-2062

    hdu 2060 斯诺克,读懂题意直接模拟 #include<stdio.h> int main(){ int N; ]; a[]=; ;i<=;i++){ a[i]=(-i)*i/ ...