ionic3 日期选择的三种方式

第一种 使用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)
    );
  }