ionic开发的过程中遇到的问题及解决方法的整理（四）——时间控件Date Picker的运用

1.安装安装Cordova和Ionic Native插件：

$ ionic cordova plugin add cordova-plugin-datepicker
$ npm install --save @ionic-native/date-picker

2.在app.module.ts中引入date-picker：

import { DatePicker } from '@ionic-native/date-picker';
...

@NgModule({

  ...
  providers: [
    ...
    DatePicker
    ...
  ]
  ...
})
export class AppModule { }

3.用法

html中：

<ion-item>
  <ion-label>日期</ion-label>
  <ion-input disabled=true type="text" [(ngModel)]="tDate" text-right (click)="getDate()"></ion-input>
</ion-item>

ts中：

import { DatePicker,DatePickerOptions } from '@ionic-native/date-picker';
//导入

constructor（
 private datePicker: DatePicker
）{
}

getDate() {
   let options : DatePickerOptions ={
      date: new Date(),
      mode: 'datetime',
      titleText:'请选择日期',
      okText:'选择',
      cancelText: '取消',
      todayText:'今天',
      nowText: '现在',
      is24Hour:true,
      allowOldDates:true,
      doneButtonLabel:'确定',
      minuteInterval:10,
      androidTheme: this.datePicker.ANDROID_THEMES.THEME_HOLO_DARK 
   }
   this.datePicker.show(options).then(
      date => {
        let time = new Date(date.getTime() + 8 * 60 * 60 * 1000).toISOString();
        this.tDate = String(time.substring(0, time.length - 5)).replace('T', ' ')
        //格式时间显示样式
      },
      err => console.log('Error occurred while getting date: ', err)
    );

  }

最后在真机或模拟机上进行测试