1.安裝安裝Cordova和Ionic Native插件:html
$ ionic cordova plugin add cordova-plugin-datepicker $ npm install --save @ionic-native/date-picker
2.在app.module.ts中引入date-picker:android
import { DatePicker } from '@ionic-native/date-picker'; ... @NgModule({ ... providers: [ ... DatePicker ... ] ... }) export class AppModule { }
3.用法npm
html中:app
<ion-item> <ion-label>日期</ion-label> <ion-input disabled=true type="text" [(ngModel)]="tDate" text-right (click)="getDate()"></ion-input> </ion-item>
ts中:ionic
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) ); }
最後在真機或模擬機上進行測試ide