在使用ionic 做混合开发时,大家可能会遇到需要选择日期插件,本文的意图是教大家使用github 的 ionic-datepicker插件,在此先感谢插件的上传者。
1.插件的安装
//关于插件的安装官网提供了一些方法,不过并不是那么容易上手,在此教大家一种快速集成方法。
1. 下载github的ZIP 文件,或者克隆相关文件。解压文件后找到dist 文件夹 。接着在引入 JS文件。比如:<script src="lib/ionic-datepicker/dist/ionic-datepicker.bundle.min.js"></script>(引入文件时,注意文件存放位置是否正确)
2.在相应需要插件的模块中加注入,如下:
angular.module('mainModuleName', ['ionic', 'ionic-datepicker']){},注入后再加一些配置大家就可以调用了。
PS:这一步大家不要忘记。
2.插件的使用
. 在.controller 中添加如下代码
//主体对象
$scope.dateobj = {
titleLabel: '选择日期', //可选
todayLabel: '今天', //可选
closeLabel: '关闭', //可选
setLabel: '设置', //可选
callback: function (val) { //Mandatory
console.log('Selected date is : ', val);
//datePickerCallbacke(val);
},
setButtonType: 'button-assertive', //可选
todayButtonType: 'button-assertive', //可选
closeButtonType: 'button-assertive', //可选
inputDate: new Date(), //可选,输入值
mondayFirst: false, //可选,星期一开头
// disabledDates: disabledDates, //可选
weekDaysList: ["日", "一", "二", "三", "四", "五", "六"], //可选
monthList: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], //可选
templateType: 'popup', //可选i.e.的模式 modal or popup(兼容模式?)
showTodayButton: 'true', //可选
modalHeaderColor: 'bar-positive', //可选
modalFooterColor: 'bar-positive', //可选
from: new Date(2008, 8, 2), //可选
to: new Date(2100, 8, 25), //可选
dateFormat: 'yyyy-MM-dd', //可选
closeOnSelect: false, //设置为true 的话点击日期就会关闭
};
$scope.openDatePicker = function(){
ionicDatePicker.openDatePicker($scope.dateobj);
};
2.我们需要在html 文件中调用打开插件的方法
比如:<button class="button button-default button-block" ng-click="openDatePicker()">
最后效果如下图