github 官网 ionic-datapicker 插件用法

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

     最后效果如下图