ionic 使用mobisscrolls,实现日期选择的插件

废话不多说,直接说用法:

1,先下载mobisscrolls的破解版,下载地址,链接:http://pan.baidu.com/s/1boSKf51 密码:5dft

当然你也可以去官网下载,不过官网的是要收费的。官网:https://demo.mobiscroll.com/

但是官网有一些简单的代码例子贴出来了,可以查看调用,点击链接直达https://demo.mobiscroll.com/v3/angular/datetime#demo=time&theme=material

2,下载jquery,你可以到官网下载,或者直接在项目里面使用npm、bower安装;

  1,使用npm安装:npm install jQuery

  2,使用bower安装(前提是bower已安装,具体安装方法可以百度):bower install jQuery。

3,接下来就是在项目里面使用了:

  (一)首先将下载下来的mobisscrolls解压缩,然后复制到ionic项目下lib文件下

然后是jQuery,如果是使用npm或者是bower安装的,则自动会在lib文件夹下面,如果是自己下载的,则把下载下来的jQuery.js放在lib包下面;

(二)引用mobisscrolls包和jQuery

这个引用是在index.xml文件里面的引用。注意:jQuery的引用必须在mobisscrolls的引用前面,否则会报错。

对了,别忘记引用mobisscrolls包下面的css文件,也是在index.xml中引用

(三)实现效果

这是布局代码:

<ion-view>  <ion-content>    <input id="demo" class="button-positive" style="width: 100%;height: 50px;margin: 3px;" ng-click="test3()">  </ion-content></ion-view>

这是controller代码
$scope.test3 = function () {  $(function () {    var today = new Date(),      currYear = today.getFullYear(),      currMonth = today.getMonth(),      maxDate = new Date(currYear, currMonth + 6, today.getDate()),      closedDays = [‘w0‘, ‘w6‘, ‘1/1‘, ‘1/2‘, ‘12/25‘, ‘12/26‘],      booked = [new Date(currYear, currMonth, 26), new Date(currYear, currMonth + 1, 10), new Date(currYear, currMonth + 2, 25)],      invalid = closedDays.concat(booked);

$(‘#demo‘).mobiscroll().date({      theme: ‘material‘,      lang: ‘zh‘,      display: ‘center‘,      min: today,      max: maxDate,      invalid: invalid,      dateWheels: ‘dd D MM yy‘    });

});}使用时注意控件的id要与controller中的id一致,其他样式可以参考官网文档。

下面是实现的效果

楼主也不是太会用,如果有不足的地方请指出,谢谢。

然后mobisscrolls的基本用法差不多就这样了,如果有不明白的可以加QQ群629856806.

时间: 2024-11-05 16:09:30

ionic 使用mobisscrolls,实现日期选择的插件的相关文章

重写的HTML5酒店入住日期选择日历插件

<!DOCTYPE HTML><html lang="zh-CN"><head><title>接触角测定仪</title><script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js" type="application/javascript" language="javascript">&

mobiscroll日期选择插件移动端插件文本选择插件

移动端选择插件mobiscroll的使用demo 一开始是弄个日期选择的插件,网上看到这个mobiscroll这个插件,然后各种下各种找demo,最后自己研究了一天下面把自己项目的demo拔出来分享给大家(以及文件下载),多多海涵,如果大家看了我的这文章有更好的写法还望赐教~ 首先是常用的日期使用: HTML部分: <li id="birthday"> <div class="mbase-menu-title">生日</div>

DatePicker - 日期选择插件

在一些WEB系统中,日期选择插件必不可少的功能,今天为大家分享几个不错的日期选择插件.希望对大家有所帮助. 1)My97DatePicker是一个更全面,更人性化,并且速度一流的日期选择控件.具有强大的日期范围限制功能:自定义事件和丰富的API库:多语言支持和自定义皮肤支持:跨无限级框架显示和自动选择显示位置. 主页: http://www.my97.net/dp/index.asp 演示地址: http://www.my97.net/dp/demo/index.htm 2)Date Range

EasyUI 日期选择插件封装成选择到月份的插件

将普通的日期选择插件封装成选择到月份的插件:                     var nowMonth = new Date();                    var month = nowMonth.getMonth()+1;                    month = month < 10 ?"0"+month:month;                    var fmdate =nowMonth.getFullYear()+"-&

icker - 日期选择插件

DatePicker - 日期选择插件 在一些WEB系统中,日期选择插件必不可少的功能,今天为大家分享几个不错的日期选择插件.希望对大家有所帮助. 1)My97DatePicker是一个更全面,更人性化,并且速度一流的日期选择控件.具有强大的日期范围限制功能:自定义事件和丰富的API库:多语言支持和自定义皮肤支持:跨无限级框架显示和自动选择显示位置. 主页: http://www.my97.net/dp/index.asp 演示地址: http://www.my97.net/dp/demo/in

【jquery】多日期选择插件easyui date

1.本次介绍一个好用的 多日期选择插件:EasyUI date,适用于:需要一次性选择多个日期,无需手动一个一个进行添加. 2.效果图: 3.下载地址:http://www.jeasyui.com/download/index.php 4.汉化:建议在使用页面: <script type="text/javascript" src="你的网站绝对地址/locale/easyui-lang-zh_CN.js"></script> 5.使用Dem

easyUI自带的时间插件日期选择、月份选择、时间选择的使用

1.日期选择 只要将class设置成easyui-datebox就可以了,当然前提是已经应用了easyui的js <input type="text" class="easyui-datebox" id="datetime"> 2.时间选择 默认的时间选择是精确到年月日时分秒的,只要把class设置成easyui-datetimebox就可以实现 <input type="text" id="dat

jQuery DateTimePicker 日期和时间插件

jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等. 日期选择插件是一个配置灵活的插件,你可以定义它的展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等 文档和下载地址: 1.jQuery-Timepicker-Addon的下载地址:https://github.com/trentrichardson/jQuery-Timepicker-Addon

angularjs之ui-bootstrap的Datepicker Popup不使用JS实现双日期选择控件

最开始使用ui-bootstrap的Datepicker Popup日期选择插件实现双日期选择时间范围时,在网上搜了一些通过JS去实现的方法,不过后来发现可以不必通过JS去处理,只需要使用其自身的属性和参数即可实现,效果如下图(一截图就不显示鼠标的红色圆圈不可选的样式了...尴尬): 这里先附上我觉得简单易懂的JS实现方法,大家可以看看实现的原理: 以下代码就是最开始网上搜索的简单易懂的:http://www.cnblogs.com/tonghaolang/p/5972676.html <!DO