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);
  }
}

 

效果：