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 ...
随机推荐
- 用java写的一个程序,可以调用windows系统中自带的各种工具,例如截图,便签等
由于图片资源没有上传,所以运行后不会有图片,感兴趣的同学可以@我,我打包上传, package SmallPrograme; import java.awt.*; import java.awt.ev ...
- VS 2017 Git failed with a fatal error的解决办法
前几天,满怀欣喜的从VS2015更新到了VS2017,经过这几天的试用,整体来说感觉还是挺不错的.昨天推送项目到远程服务器的时候,发现出现了推送失败的错误,错误如图: 按照提示,我看到输出窗口的输入内 ...
- folly教程系列之:future/promise
attension:本文严禁转载. 一.前言 promise/future是一个非常重要的异步编程模型,它可以让我们摆脱传统的回调陷阱,从而使用更加优雅.清晰的方式进行异步编程.c++11中 ...
- mac下安装Java开发环境
1.安装JDK 打开网页,进入jdk官网下:http://www.oracle.com/technetwork/java/javase/downloads/index.html 下载后,进入finde ...
- HYML / CSS和Javascript 部分
1 CSS实现垂直水平居中 HTML结构: <div class="wrapper"> <div class="content">&l ...
- 关于定时发送服务的解决办法(PHP)
一.定时发送任务解析 在进行手机APP或者微信开发的时候,经常会有需要定时推送消息的场景. 定时发送又分为两种: 一种是在开发的时候固定时间,后台管理人员只能选择将要推送的消息: 另一种是后台管理人员 ...
- Hadoop - 操作练习之单机配置 - Hadoop2.8.0/Ubuntu16.04
系统版本 anliven@Ubuntu1604:~$ uname -a Linux Ubuntu1604 4.8.0-36-generic #36~16.04.1-Ubuntu SMP Sun Feb ...
- [第一阶段] Python学习
首先声明一下,我这个学习计划是关于学习Python的. 先说一下起因:我自己接触Python算是很久了,目前仍没学会,很失败,很惭愧.所以这次一方面简单分析一下自学会碰到的问题:另一方便,我想到了一种 ...
- 分布式键值存储系统ETCD调研
分布式键值存储系统ETCD调研 简介 etcd是一个开源的分布式键值存储工具--为CoreOS集群提供配置服务.发现服务和协同调度.Etcd运行在集群的每个coreos节点上,可以保证coreos集群 ...
- [内存管理]管理图解v0.1 v0.2 v0.3
内存管理图解v0.1 内存管理图解v0.2 内存管理图解v0.3