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() * 60 * 60) + ((new Date()).getMinutes() * 60)),
        format: 12,
        step: 15,
        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(2012, 1, 1),
      to: new Date(2020, 1, 1),
      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>