Ionic 日期时间插件

1.插件安装 日期插件 时间插件

备注： 具体 查看 https://github.com/rajeshwarpatlolla/ionic-datepicker    https://github.com/rajeshwarpatlolla/ionic-timepicker

2.配置示例：

config 中配置

 .config(['ionicTimePickerProvider','ionicDatePickerProvider',
     function(ionicTimePickerProvider,ionicDatePickerProvider) {

     var timePickerObj = {
         inputTime: (((new Date()).getHours() *  * ) + ((new Date()).getMinutes() * )),
         format: ,
         step: ,
         setLabel: '选择',
         closeLabel: '关闭'
       };
     var datePickerObj = {
       inputDate: new Date(),
       setLabel: '选择',
       todayLabel: '今天',
       closeLabel: '关闭',
       mondayFirst: false,
       weeksList: ["日", "一", "二", "三", "四", "五", "六"],//["S", "M", "T", "W", "T", "F", "S"],
       monthsList: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],//["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]
       templateType: 'popup',
       from: new Date(, , ),
       to: new Date(, , ),
       showTodayButton: true,
       dateFormat: 'yyyy-MM-dd',
       closeOnSelect: false
       //disableWeekdays: [6]
     };
     ionicDatePickerProvider.configDatePicker(datePickerObj);
     ionicTimePickerProvider.configTimePicker(timePickerObj);
 }])

3.controller

.controller("consumeCtrl",["ionicDatePicker","ionicTimePicker", function (ionicDatePicker,ionicTimePicker) {
    var ipObj1 = {
      callback: function (val) {
        console.log('点击事件返回值 : ' + val, new Date(val));
      },
      /***
      disabledDates: [
        new Date(2016, 2, 16),
        new Date(2015, 3, 16),
        new Date(2015, 4, 16),
        new Date(2015, 5, 16),
        new Date('Wednesday, August 12, 2015'),
        new Date("08-16-2016"),
        new Date(1439676000000)
      ],***/
      from: new Date(2012, 1, 1),
      to: new Date(2016, 10, 30),
      inputDate: new Date(),
      mondayFirst: false,
     // disableWeekdays: [],
      closeOnSelect: false,
      templateType: 'popup'
    };
    $scope.openDatePicker = function(){
      ionicDatePicker.openDatePicker(ipObj1);
    };
    var ipOb2 = {
      callback: function (val) {
        if (typeof (val) === 'undefined') {
          console.log('Time not selected');
        } else {
          var selectedTime = new Date(val * 1000);
          console.log('点击事件返回值 : ', val, 'and the time is ', selectedTime.getUTCHours(), 'H :', selectedTime.getUTCMinutes(), 'M');
        }
      },
      inputTime: 50400,
      format: 12,
      step: 15,
    };
    $scope.openTimePicker = function(){
      ionicTimePicker.openTimePicker(ipOb2);
    };

  }])

4.html 及效果

 <ion-view view-title="消费记录"  >
   <ion-content>
     <button  ng-click="openDatePicker()">日期</button>
     <button  ng-click="openTimePicker()">时间</button>

   </ion-content>
   </ion-view>

备注：记得index.html 引用

<!--日期控件-->
<script src="lib/ionic-datepicker/dist/ionic-datepicker.bundle.min.js"></script>
<!--时间控件-->
<script src="lib/ionic-timepicker/dist/ionic-timepicker.bundle.min.js"></script>