Ionic项目中用到了时间选择器，为了快速快速开发选择了集成ionic-datepicker插件，GitHub上的文档有详细的步骤，但在实际开发中还是遇到了很多坎坷，记录下自己的代码，方便以后使用。GitHub地址。

效果图如下：

1.文档中介绍使用bower install ionic-datepicker --save命令安装插件，自己也研究了半天bower，感觉这一步没用什么必要，完全可以省略。想学习bower的朋友，可以参考 https://segmentfault.com/a/1190000002971135。

2.在项目的index.html中引入ionic-datepicker.bundle.min.js文件的存放目录。先在GitHub上下载，然后把dist拷贝到项目的lib目录下。

<scriptsrc="lib/ionic-datepicker/dist/ionic-datepicker.bundle.min.js"></script>

3.在项目的app.js中注入依赖ionic-datepicker，如下：

angular.module('mainModuleName', ['ionic','ionic-datepicker']){

.......

}

4.在项目的app.js中添加默认配置：

angular.module('starter', ['ionic', 'ion-floating-menu', 'ionic-datepicker']).run(function($ionicPlatform) {$ionicPlatform.ready(function() {if(cordova.platformId === 'ios' && window.cordova && window.cordova.plugins.Keyboard) {// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard// for form inputs)cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);// Don't remove this line unless you know what you are doing. It stops the viewport// from snapping when text inputs are focused. Ionic handles this internally for// a much nicer keyboard experience.cordova.plugins.Keyboard.disableScroll(true);}if(window.StatusBar) {//StatusBar.styleDefault 状态栏默认样式，也就是电池信号黑色；//StatusBar.styleLightContent 状态栏内容浅色，貌似就是白色，适合深色背景；//StatusBar.styleBlackTranslucent 状态栏黑色半透明，电池时间都是白色的，适合深色背景；//StatusBar.styleBlackOpaque 状态栏黑色不透明，还是白色的，适合深色背景；//StatusBar.hide 状态栏隐藏；//StatusBar.show 状态栏显示；StatusBar.styleLightContent();}});
}).config(['$stateProvider', '$urlRouterProvider', '$locationProvider', '$ionicConfigProvider', 'ionicDatePickerProvider', function ($stateProvider, $urlRouterProvider, $locationProvider, $ionicConfigProvider, ionicDatePickerProvider) {//$locationProvider.html5Mode({//    enabled: true,//    requireBase: false//});//日期选择var datePickerObj = {inputDate: new Date(),titleLabel: '选择日期',setLabel: '确定',todayLabel: '今天',closeLabel: '关闭',mondayFirst: false,weeksList: ["日", "一", "二", "三", "四", "五", "六"],monthsList: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],templateType: 'popup',from: new Date(2012, 8, 1),to: new Date(2028, 8, 1),showTodayButton: true,dateFormat: 'yyyy-MM-dd',closeOnSelect: false,disableWeekdays: []};ionicDatePickerProvider.configDatePicker(datePickerObj);.......}]);

5.把ionic-datepicker注入到要使用此插件的页面对应的controller.js:

(function () {"use strict"angular.module('starter').controller('licenseAdd', ['$scope', 'ionicDatePicker', 'nav', '$filter', function ($scope, ionicDatePicker, nav, $filter) {$scope.validedTime = new Date();var datePickerObj = {//选择日期后的回掉callback: function (val) {if (typeof (val) === 'undefined') {} else {$scope.validedTime = $filter('date')(new Date(val), 'yyyy-MM-dd');datePickerObj.inputDate = new Date(val); //更新日期弹框上的日期}},disabledDates: [new Date(2016, 2, 16),new Date(2015, 3, 16),new Date(2015, 4, 16),new Date(2015, 5, 16),new Date('Wednesday, August 12, 2015'),new Date("2016-08-16"),new Date(1439676000000)],from: new Date(2010, 1, 1),to: new Date(2038, 10, 30),inputDate: new Date(),mondayFirst: true,disableWeekdays: [], //设置不能选中closeOnSelect: false,dateFormat: 'yyyy-MM-dd',templateType: 'popup',};//打开日期选择框$scope.openDatePicker = function () {ionicDatePicker.openDatePicker(datePickerObj);};$scope.navigate = function (state) {nav.navigate(state);};}]);
})();

6.在使用此插件的html页面中简单的一行代码：

 <div ng-bind="validedTime | date:'yyyy-MM-dd'" ng-click="openDatePicker()" style="background-color:cadetblue"></div>

这个插件的使用到此要告一段落了，虽然花费了很多时间，但摸索出来了很多知识，有不懂的伙伴可以联系我，共同讨论。