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.
ionic 使用mobisscrolls,实现日期选择的插件的更多相关文章
- Ionic实战六:日期选择控件
onic日期选择控件,用于ionic项目开发中的日期选择以及日期插件   
- 多日期选择jQuery插件 MultiDatesPicker for jQuery UI
Multiple-Dates-Picker-for-jQuery-UI是一个多日期选择的jquery控件. GIT源码: https://github.com/dubrox/Multiple-Da ...
- 贴近用户体验的jQuery日期选择插件
分享一款贴近用户体验的jQuery日期选择插件.这是一款双日历jQuery日期选择时间插件pickerDateRange.效果图如下: 在线预览 源码下载 var dateRange = new ...
- 纯原生js移动端日期选择插件
最近在项目上需要使用日期选择插件,由于是移动端的项目,对请求资源还是蛮节约的,可是百度上一搜,诶~全是基于jquery.zepto的,本来类库就很大,特别像mobiscroll这种样式文件一大堆又丑又 ...
- 移动设备日期选择插件(基于JQUERY)
上周花了2个小时写的一个日期选择插件,比较适合移动端的设备.先看个效果图吧.如果刚好是你需要的就往下吧,不需要的也可以继续..... 其实网络上已经有的了类似的成熟插件,比如基于mobiscroll, ...
- EasyUI 日期选择插件封装成选择到月份的插件
将普通的日期选择插件封装成选择到月份的插件: var nowMonth = new Date(); var month = ...
- 推荐三款日期选择插件(My97DatePicker+jquery.datepicker+Mobiscroll)
1.My97DatePicker 纯原生JS,专注于PC端,支持IE6+:页面上只需要引入WdatePicker.js文件,但是My97DatePicker整个目录是一个整体,最好不要破坏里面的目录结 ...
- 【jquery】多日期选择插件easyui date
1.本次介绍一个好用的 多日期选择插件:EasyUI date,适用于:需要一次性选择多个日期,无需手动一个一个进行添加. 2.效果图: 3.下载地址:http://www.jeasyui.com/d ...
- 页面日期选择控件--jquery ui datepicker 插件
日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等.官方地址:http://docs.jquery.com ...
随机推荐
- mysql 免安装版 + sqlyog 安装 步骤 --- 发的有点晚
总有些朋友不会安装mysql,其实软件安装不是学习mysql的重点,基本上也就安装一次,工作后一般公司里也不会让你安装,如果非要安装,百度一下就行了.安装版本百度上有许多,下面就提供一个免安装版的步骤 ...
- UPS电源效果及有关名词解析
UPSuninterruptpowersystem缩写,4.工频机和高频机<工频机UPS选用工频变压器作为整流器和逆变器的部件的UPS电源:高频机是以高频开关元件代替整流器和逆变器中粗笨的工频变 ...
- java映射(map用法)
主要分两个接口:collection和Map 主要分三类:集合(set).列表(List).映射(Map)1.集合:没有重复对象,没有特定排序方式2.列表:对象按索引位置排序,可以有重复对象3.映射: ...
- 解决Javascript大数据列表引起的网页加载慢/卡死问题。
在一些网页应用中,有时会碰到一个超级巨大的列表,成千上万行,这时大部份浏览器解析起来就非常痛苦了(有可能直接卡死). 也许你们会说可以分页或动态加载啊?但是有可能需求不允许分页,动态加载?网络的延迟也 ...
- 闭包(匿名函数) php
php中的闭包,之前不理解.以前项目中虽然有用到,也是别人怎么用,自己也跟着怎么用,也没具体去看一下,时间长了就忘了,也不知道闭包是怎么回事.今天网上搜集了关于php闭包相关的文章,看了7,8篇,干货 ...
- 跟Microsoft.AspNet.Identity学习哈希加盐法
什么是哈希加盐法? 废话少说:对于MD5这种加密算法,同样的密码每次加密后得到的密文是一样的,所以黑客可以利用已知的密码库(彩虹库)对目标数据库密文进行对比进行攻击. 怎样解决:哈希加盐法,以下是网上 ...
- php操作memcache缓存基本方法
memcache 是一个高效的分布式的内存对象缓存系统,他可以支持把php的各种数据(数组,对象,基本数据类型)放在它管理的内存中 1.代码使用 <?php //连接 $mem = new Me ...
- 【Spark2.0源码学习】-4.Master启动
Master作为Endpoint的具体实例,下面我们介绍一下Master启动以及OnStart指令后的相关工作 一.脚本概览 下面是一个举例: /opt/jdk1..0_79/ ...
- pthread的lowlevellock
pthread的lowlevellock是futex的最简单的锁应用.也是pthread其它同步原语最基本的锁.lowlevellock提供(或实现)了三种锁(方法),一是基于0或1的互斥的锁规则,二 ...
- oracle的神奇化学反应(行转列+获取表字段)
橘子+汽水=橘子汽水,∑(゚Д゚ノ)ノ好无聊!!! 火鸡+烤架=烤火鸡,ლ(´ڡ`ლ)还不错. wm_concat()+表字段查询=(✪ω✪)会是啥呢? wm_concat()函数,该函数可以把列值以 ...