ionic 日期控件 ionic-datepicker 学习

来源：互联网发布：淘宝如何查购买记录编辑：程序博客网时间：2024/05/22 00:05

文章参考

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;                    }                });            }        };    });

0 0