Ionic4.x 中的 UI 组件(UI Components) 日期组件

1、日期组件的基本使用 官方文档:https://ionicframework.com/docs/api/datetime

 

模板中:

<ion-datetime display-format="YYYY-MM-DD" [(ngModel)]="day"></ion-datetime> 
<ion-datetime display-format="MM/YYYY" picker-format="MMMM YYYY"></ion-datetime>

业务逻辑中:
引入第三方模板把时间戳转化成 年-月-日的格式

 

import sd from 'silly-datetime'; 
constructor() {
    this.day=sd.format(new Date(), 'YYYY-MM-DD'); 
}

 

2、自定义日期组件的 Options

 

<ion-datetime display-format="YYYY-MM-DD" [pickerOptions]="customPickerOptions" ></ion-datetime>

 

public customPickerOptions = {
 buttons: [{
text: '取消',
handler: () => 
　　　　console.log('Clicked Save!') 
}, 
{
text: '保存', 
handler: () => {
　　console.log('Clicked Log. Do not Dismiss.'); }
}] }

实例：

https://www.npmjs.com/package/silly-datetime  引入第三方格式化模块

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/tabs/tab1" text="返回"></ion-back-button>
    </ion-buttons>
    <ion-title>datetime日期组件</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>

  <ion-list>
    <ion-item>
      <ion-label>Date</ion-label>
      <ion-datetime display-format="YYYY-MM-DD" picker-format="YYYY MM DD" placeholder="选择日期"></ion-datetime>
    </ion-item>
  </ion-list>

  <br>


  <ion-list>
      <ion-item>
        <ion-label>双向数据绑定</ion-label>
        <ion-datetime display-format="YYYY-MM-DD" picker-format="YYYY MM DD"  [(ngModel)]="day"></ion-datetime>
      </ion-item>
  </ion-list>



  <ion-list>
      <ion-item>
        <ion-label>显示当前日期</ion-label>
        <ion-datetime display-format="YYYY-MM-DD" picker-format="YYYY MM DD"  [(ngModel)]="nowDay" (ionChange)="datetimeChange($event)"></ion-datetime>
      </ion-item>
  </ion-list> 



   <ion-list>
      <ion-item>
        <ion-label>汉化日期按钮</ion-label>
        <ion-datetime display-format="YYYY-MM-DD" [pickerOptions]="customPickerOptions" picker-format="YYYY MM DD"  [(ngModel)]="nowDay" (ionChange)="datetimeChange($event)"></ion-datetime>
      </ion-item>
  </ion-list> 

    {{day}}
</ion-content>

import { Component, OnInit } from '@angular/core';

//格式化日期的第三方模块   引用 cnpm 

import sd from 'silly-datetime';

@Component({
  selector: 'app-datetime',
  templateUrl: './datetime.page.html',
  styleUrls: ['./datetime.page.scss'],
})
export class DatetimePage implements OnInit {

  day = '2019-02-13'

  public nowDay;

  //自定义option
  public customPickerOptions = {
    buttons: [{
      text: '取消',
      handler: () => console.log('Clicked 取消!')
    }, {
      text: '确认',
      handler: () => {
        console.log('Clicked 确认');
        // return false;       
        console.log(this.nowDay);
      }
    }]
  }
  constructor() {
    //var d=new Date();
    //Thu Feb 14 2019 15:57:43 GMT+0800 (中国标准时间)
    this.nowDay = sd.format(new Date(), 'YYYY-MM-DD');
  }
  ngOnInit() {
  }
  datetimeChange(e) {
    console.log(e.detail.value);
    console.log(this.nowDay);
  }
}

 

效果：