Ionic集成ionic-datepicker插件

很多项目需要用到日历控件，这里就介绍一下ionic-datepicker的集成，还是用bower来集成

bower install ionic-datepicker

接着在index.html里引入

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

别忘了在app.js里加入

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

最后就是显示了

           var datePickerObj = {
                callback: function (val) {
                    $scope.value = $filter('date')(new Date(val),'yyyy-MM-dd');
                },
                titleLabel: '选择日期',
                setLabel: '确定',
                todayLabel: '今天',
                closeLabel: '关闭',
                mondayFirst: false,
                weeksList: ["日", "一", "二", "三", "四", "五", "六"],
                monthsList: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
                templateType: 'modal',
                from: new Date(2010, 1, 1),
                to: new Date(2019, 12, 31),
                showTodayButton: false,
                dateFormat: 'yyyy-MM-dd',
                closeOnSelect: false,
                disableWeekdays: []
            };

            $scope.openDatePicker = function(){
                datePickerObj.inputDate = new Date($scope.value);
                ionicDatePicker.openDatePicker(datePickerObj);
            };

接着上图

屏幕快照 2016-09-30 下午4.38.16.png