ionic3 日期选择的三种方式

第一种 使用HTML5标签date input类型

各种日期格式可以参照http://www.webhek.com/post/html5-date.html

第二种 使用ionic控件ion-datetime


  Date
  
各种日期格式可以参照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编码

  
  选择日期:{{dateStr | date:'yyyy-MM-dd HH:mm:ss'}}
  *此处规定了日期的显示格式。
  也可以在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)
    );
  }


你可能感兴趣的:(经验,学习)