ionic3 + 時間控件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)
    );

  }

最後在真機或模擬機上進行測試