使用Ionic自带的datepicker插件

最近在项目中，遇到了一个需要日期的选择框。在网上找了一大堆，挺费劲的。Ionic自带的插件需要重新bower，命令是:

bower install ionic-datepicker --save

下载完成你就可以在你的lib目录下面看到datepicker文件，在index中引入

可以用了，注意要在module中注入

<script src="lib/ionic-datepicker/dist/ionic-datepicker.bundle.min.js"></script>
angular.module('starter.controllers', ['ionic-datepicker'])

我这里用的是弹出（popup），在所想要弹出的页面中，放入以下标签

<ionic-datepicker input-obj="datepickerObjectEnd">
<button class="button button-positive"> {{datepickerObjectEnd.inputDate | date:datepickerObjectEnd.dateFormat}}</button>
</ionic-datepicker>

在所对应的controller中，放入你想要的配置

//这是不可选的日期列表
var disabledDates = [
      new Date(1437719836326),
      new Date(),
      new Date(2016, 7, 10), //months are 0-based, this is August, 10th!
      new Date('Wednesday, August 12, 2015'), //Works with any valid Date formats like long format
      new Date("08-14-2016"), //Short format
      new Date(1439676000000) //UNIX format
    ];
//方便的年月日设置方式，正和我意，可以随便改了。
    var weekDaysList = ["S", "M", "T", "W", "T", "F", "S"];
    //默认值：["S", "M", "T", "W", "T", "F", "S"];
    var monthList = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    //默认值：["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

//日期选择后的回调函数
    var datePickerCallbacks = function (val) {
        if (typeof (val) === 'undefined') {
        } else {
            console.log('Selected date is : ', val);
            $scope.datepickerObjectEnd.inputDate = val;  //这行官网没有，不设置 的话，选中日期不能回填到页面。
        }
    };
//主体对象
    $scope.datepickerObjectEnd = {
        titleLabel: 'Select',  //可选
        closeButtonType:'button-assertive',//可选
        setButtonType: 'button-assertive',  //可选
        todayButtonType: 'button-assertive',  //可选       
        inputDate: new Date(),  //可选，输入值
        sundayFirst: true,  //可选,星期一开头
        disabledDates: disabledDates, //可选,不可选的日期
        weekDaysList: weekDaysList, //可选
        monthList: 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(2030, 8, 25),  //可选
        callback: function (val) {  //Mandatory
            datePickerCallbacks(val);
        },
        dateFormat: 'yyyy-MM-dd', //可选
        closeOnSelect: true, //可选,设置选择日期后是否要关掉界面。呵呵，原本是false。
    };

这里点击页面的button，就可以弹出日历了，如图

如果是ionic默认的，底下的一行有三个button，分别是close，set和todayButton，但是在我的项目中，只需要用到set，另外两个不要，而参考ionic-datepicker的API，我试了好久都没有找到解决办法，，最后突发奇想，去修改引入的源代码。找的肉疼，把ionic-datepicker-modal.html中的内容全删，发现对实际页面一点影响都没有，可是除了这里别的地方都没有页面标签内容了，想破了脑袋，最后是在js中，定义的三个buttonType才找到问题所在，删了另外两个，页面才显示出我想要的效果。这也算是一点小小的成就吧！毕竟代码是压缩过的，找了一下午，眼睛都看花了，现在只需要设置我想要的样式颜色就可以啦！