github 官网 ionic-datapicker 插件用法

来源：互联网发布：知乎live可以事后看吗编辑：程序博客网时间：2024/06/03 19:30

在使用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()">

最后效果如下图

2 0