上次给大家介绍了一款 移动端微网站的时间选择插件 ,你还记得么？今天给大家介绍一款新的插件：mobiscroll，为什么上次的可以用，这次还要介绍新的呢？主要因为它十分灵活，可控，总有一种组合适合你。 首先介绍其优点： 多主题(默认、IOS、SenseUI、Android-ICS-Light、Android-ICS、WindowsLight、WindowsPhone)；多模式(滚动、点击、混合)；多显示形式(拾取、直接、气泡、顶部、底部)；多动画(无、渐显、翻转、弹出、翻书、从左滑出、自下而上、自上滑出、自下滑出)；多种模式——赋予不同的参数，就可以只选到日期、只选时间、日期时间同时选；
我们可以任意组合上面的，别晕，下面看效果图你就知道各自对应什么了。 话不多说，先看效果图： 多主题
默认.png
IOS.png
SenseUI.png
Android-ICS-Light.png
Android-ICS.png
WindowsLight.png
WindowsPhone.png 多模式(以Android-ICS-Light主题为例，下面都用这主题，因为笔者觉得这个主题更好看)
滚动.png
点击.png
混合(点击-滚动都可以).png 多显示形式
直接显示在界面上.png
拾取.png
底部.png
顶部.png
气泡.png 多动画多动画在这里光靠图片模拟不出来，靠各位自己去尝试了，我会在最后附一个demo的链接，大家可以下了看看，在里面寻找自己想要的组合效果。
多种模式最后就是多模式了，日常开发过程中，对日期精确地位数要求有很多，像“只要日期”、“只要时间”、“日期和时间都要“的情况都是很常见的。
只要日期.png
只要时间.png
日期时间都要.png 好了，常见的需求以上基本都能满足了，你可以自己组合。
我们该如何组合呢？来看看部分代码 应用不同的主题只要在这里引用不同的css和js(对应名称一看就知道)
被注释掉的都是其他的主题，你可以按自己的需要引入不同的css。注意：最后2个css是必须要引入的。不同的css主题引入的js也是不一样的，看下面代码
同样，前4个js也是必须引入的，剩余的看你自己需求来引入对应的js了。光引入js和css是不够的，还需要执行一段js，很简单
我们可以在这里进行配置。
时间、日期、日期时间同时保留配置这个就更简单了，只要对上面我们写的js修改一个参数preset: 'date'---日期preset: 'time' --- 时间preset: 'datetime' ---日期时间都保留 最后，如果你要知道更多的配置项，可以去英文官网查看， 狠戳这里 。
测试选择.png 如果你想要组合自己想要的显示方式，可以在我附带的demo中实时选择，再配置，如上图。查看demo， 狠戳这里 。(PS:密码 5uwp)
如果这篇文章，帮助到了你，麻烦帮忙点赞啦~
本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉
本文系统来源：php中文网
