第一种 使用HTML5标签date input类型
<label>日期:</label><input id="meeting" type="date"/>
各种日期格式可以参照http://www.webhek.com/post/html5-date.html
第二种 使用ionic控件ion-datetime
<ion-item>
<ion-label>Date</ion-label>
<ion-datetime displayFormat="MMM DD, YYYY HH:mm" [(ngModel)]="myDate"></ion-datetime>
</ion-item>
各种日期格式可以参照https://ionicframework.com/docs/api/components/datetime/DateTime/
第三种 使用ionic Cordova 插件date-picker
官网https://ionicframework.com/docs/native/date-picker/
安装插件
ionic cordova plugin add cordova-plugin-datepicker
npm install --save @ionic-native/date-picker
*在app.module.ts中引入date-picker
实现:
html编码
<button ion-button block color="danger" (click)="getDate()">
日期
</button>
选择日期:<a>{{dateStr | date:'yyyy-MM-dd HH:mm:ss'}}</a>
*此处规定了日期的显示格式。
也可以在ts中,像普通的JQ Date()函数一样处理。
ts编码
导入import { DatePicker,DatePickerOptions } from '@ionic-native/date-picker';
通过插件获取日期
DatePickerOptions的设置,可根据个人喜好,实际情况自己选择,具体参照官网。
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 => {
console.log('Got date: ', date);
alert(date.getSeconds());
this.dateStr=date.getTime().toString();
},
err => console.log('Error occurred while getting date: ', err)
);
}