文章参考 

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  falsedateFormat: '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  falseinputDate: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) {  //Mandatoryvar 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;}});}};});