使用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才找到問題所在，刪了另外兩個，頁面才顯示出我想要的效果。這也算是一點小小的成就吧！畢竟代碼是壓縮過的，找了一下午，眼睛都看花了，現在只需要設置我想要的樣式顏色就可以啦！