ionic 日期和时间选择器

邢小云
2023-12-01

1,日期选择器:bower install ionic-datepicker --save

github:点击打开链接

index.htnml引用:<script src="lib/ionic-datepicker/dist/ionic-datepicker.bundle.min.js"></script>

2,时间选择器:bower install ionic-timepicker --save,我是怎么下都让用我选版本好像只能下0.4.0的但是不好用没有

ionicTimePickerProvider,所以我直接从github上下载放到lib里面了。

github:点击打开链接

index.htnml引用(对应自己路径):

<script src="lib/ionic-timepicker-master/dist/ionic-timepicker.bundle.min.js"></script>

3,app.js 添加日期:ionic-datepicker,时间:ionic-timepicker

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ngCordova', 'ionic-datepicker', 'ionic-timepicker'])

4,可以在app.js添加全局日期和时间默认设置

日期: 

.config(function (ionicDatePickerProvider) {
    var datePickerObj = {
      inputDate: new Date(),
      titleLabel: '日期选择器',
      setLabel: '确认',
      todayLabel: '今天',
      closeLabel: '关闭',
      mondayFirst: false,
      weeksList: ["日", "一", "二", "三", "四", "五", "六"],
      monthsList: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
      templateType: 'popup',//popup窗口显示
      /* from: new Date(2012, 8, 1),//设置选择起始范围
       to: new Date(2018, 8, 1),//设置选择结束范围*/
      showTodayButton: true,//是否显示今天按钮
      dateFormat: 'yyyy-MM-dd',//当前时间格式
      closeOnSelect: false,//是否不显示serLabel即是否不显示确认按键
      mondayFirst: true,//星期一作为第一天
      disableWeekdays: []//禁用某个星期的所有日(不能选灰色)从0(星期日)开始
    };
    ionicDatePickerProvider.configDatePicker(datePickerObj);
  });
时间:
 .config(function (ionicTimePickerProvider) {
    var timePickerObj = {
      inputTime: (((new Date()).getHours() * 60 * 60) + ((new Date()).getMinutes() * 60)),
      format: 24,//小时制度
      step: 1,//每次选择多少分钟
      setLabel: '确认',
      closeLabel: '关闭',
    };
    ionicTimePickerProvider.configTimePicker(timePickerObj);
    ionicDatePickerProvider.configDatePicker(datePickerObj);
  });

5,日期和时间选择使用:ipObj1,ipObj2可以重新设置属性

//日期
    var ipObj1 = {
      callback: function (val) {  //Mandatory
        var date = $filter('date')(new Date(val), "yyyy-MM-dd");
        alert(date);
      }
    };
    ionicDatePicker.openDatePicker(ipObj1);
   时间/
    var ipObj2 = {
      callback: function (val) {      //Mandatory
        if (typeof (val) === 'undefined') {
          console.log('Time not selected');
        } else {
          var selectedTime = new Date(val * 1000);
          console.log('Selected epoch is : ', val, 'and the time is ', selectedTime.getUTCHours(), 'H :', selectedTime.getUTCMinutes(), 'M');
        }
      },
      /*inputTime: 50400,   //Optional*/
      /*format: 12,         //Optional*/
      /*step: 15,           //Optional*/
      /*setLabel: 'Set2'    //Optional*/
    };

    ionicTimePicker.openTimePicker(ipObj2);

.controller('DatepickerMy', function ($scope, ionicDatePicker, $filter, ionicTimePicker) {
    var ipObj1 = {
      callback: function (val) {  //Mandatory
        var date = $filter('date')(new Date(val), "yyyy-MM-dd");
        alert(date);
      }
    };
    ionicDatePicker.openDatePicker(ipObj1);
    
时间/
    var ipObj2 = {
      callback: function (val) {      //Mandatory
        if (typeof (val) === 'undefined') {
          console.log('Time not selected');
        } else {
          var selectedTime = new Date(val * 1000);
          console.log('Selected epoch is : ', val, 'and the time is ', selectedTime.getUTCHours(), 'H :', selectedTime.getUTCMinutes(), 'M');
        }
      },
      /*inputTime: 50400,   //Optional*/
      /*format: 12,         //Optional*/
      /*step: 15,           //Optional*/
      /*setLabel: 'Set2'    //Optional*/
    };

    ionicTimePicker.openTimePicker(ipObj2);

 类似资料: