ionic 日期控件 ionic-datepicker 学习

文章参考 

https://github.com/rajeshwarpatlolla/ionic-datepicker

1、引入必须的CSS 和 JS 库

<link rel="stylesheet" href="public/ionic/css/ionic.css">
<script src="public/ionic/js/ionic.bundle.js"></script>
<script src="public/js/ionic-datepicker.bundle.min.js"></script>

2、自己写的jiazhengApp模块引入ionic-datepicker模块

var app = angular.module("jiazhengApp",["ionic","ionic-datepicker"]);

3、添加全局配置文件（非必须）

angular.module("jiazhengApp").config(function ($stateProvider, $ionicConfigProvider,ionicDatePickerProvider) {
    //禁用所有缓存
    $ionicConfigProvider.views.maxCache(0);
    $stateProvider
        //家政服务包的导航首页
        .state('jiazhengIndex', {
            url: '/jiazheng/index',
            templateUrl: 'template/jiazheng/jiazhengIndexContent.html',
            //ui-router的控制器引用其他service的方法，参数$state只能在$scope后面，否则会报错
            controller: "jiazhengIndexController"
        })
        

    /**********************日期控件的配置文件 *****************************/
	//这个步骤相当于是全局配置，默认配置，可以在实际应用中覆盖相关的配置，该配置不是必须的
    var datePickerObj = {
        setLabel: '确定',
        todayLabel: '今天',
        closeLabel: '关闭',
        mondayFirst: false,
        inputDate: new Date(),
        weeksList: ["天", "一", "二", "三", "四", "五", "六"],
        monthsList: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        templateType: 'popup',
        showTodayButton: true,//true  false
        dateFormat: 'dd MMM yyyy',
        closeOnSelect: false,
        disableWeekdays: [],
        from: new Date(2015, 8, 1)
    };
    ionicDatePickerProvider.configDatePicker(datePickerObj);
    $ionicConfigProvider.tabs.position('bottom'); 

})

4、控制器中使用

angular.module("jiazhengApp").controller("khbjIndexController", ["$scope", "$state",','dateService', function ($scope, $state,dateService,) {
    

    //弹出日起对话框
    $scope.showDateDialog = function(){
        var dateConfig = {
            showTodayButton: false,//true  false
            inputDate:new Date(new Date().getTime() + 24*2*60*60*1000),
            from: new Date(new Date().getTime() + 24*2*60*60*1000),
            to: new Date(new Date().getTime() + 24*8*60*60*1000)
        };
        dateService.showDialog($scope,dateConfig);
    };
    //需要在控制器中定义设定的函数，用于显示时间显示的位置
    $scope.setDate=function(){
        $scope.formData.orderDate = dateService.getTimeStamp();
    };


}]);

5、由于时间是需要与服务器时间一致，需要添加服务获取服务器的时间

/**
 * 日期控件服务
 */
angular.module("jiazhengApp")
    .factory("dateService",function($http,$state,ionicDatePicker){
        return {
            showDialog : function(__scope__,myconfig){
                var that = this;

                if(myconfig == null || myconfig == undefined || myconfig == ""){
                    myconfig = {};
                }

                var defaultConfig = {
                    callback: function (val) {  //Mandatory
                        var mydate = new Date(val);
                        that.timeStamp = mydate.getFullYear()+"-"+(mydate.getMonth()+1)+"-"+mydate.getDate();
                        //需要在控制器中定义设定的函数，用于显示时间显示的位置
                        __scope__.setDate();
                    },
                    disabledDates: [
                        new Date('Wednesday')
                    ],
                    from: new Date(),
                    to: new Date(new Date().getTime() + 24*7*60*60*1000),
                    inputDate: new Date(),
                    mondayFirst: true,
                    disableWeekdays: [],
                    closeOnSelect: false,
                    templateType: 'popup'
                };
                defaultConfig = $.extend(defaultConfig,myconfig);
                ionicDatePicker.openDatePicker(defaultConfig);
            },
            //存储控件时间
            timeStamp:0,
            //获取控件时间
            getTimeStamp:function(){
                return this.timeStamp;
            },
            //存储服务器时间
            serverTimeStamp:0,
            //获取服务器时间
            getServerTimeStamp : function(){
                var that = this;
                var url = "/index.php/Wap/Homemake/thisTime.html";
                var p = $http.post(url);
                p.success(function(response,header,config,status){
                    if(response.status == 1){
                        that.serverTimeStamp = response.data;
                    }
                });
            }
        };
    });