ionic组件-datetime日期

基本日期

  <ion-list>
    <ion-item>
      <ion-label>Date</ion-label>
      <!--
        【picker-format】：弹框弹起时时间显示格式
        【display-format】：选择时间后，显示时间结果的格式
      -->
      <ion-datetime display-format="YYYY-MM-DD" picker-format="YYYY MM DD" placeholder="请选择日期" ></ion-datetime>
    </ion-item>
  </ion-list>

日期的双向数据绑定  

Ts代码： 

public date='2020-03-18';

Html代码：

  <ion-list>
    <ion-item>
      <ion-label>日期</ion-label>
      <ion-datetime display-format="YYYY-MM-DD" picker-format="YYYY MM DD" [(ngModel)]="date" ></ion-datetime>
    </ion-item>
  </ion-list>
<p>{{date}}</p>

 显示当前日期：

1、安装日期转换插件：ionic g page datetime --save

2、//在ts中引入格式化日期的第三方模块=》

import sd from 'silly-datetime';

import { Component, OnInit } from '@angular/core';
//引入格式化日期的第三方模块
import sd from 'silly-datetime';

@Component({
  selector: 'app-datetime',
  templateUrl: './datetime.page.html',
  styleUrls: ['./datetime.page.scss'],
})
export class DatetimePage implements OnInit {
  //申明一个接受当前时间的字段
  public nowdate;

  constructor() { }

  ngOnInit() {
  //执行当前时间的格式转换
  this.nowdate = sd.format(new Date(),'YYYY-MM-DD');
  }
  //获取当前选择的时间
  datetimeChange(e):void{
    console.log(e.detail.value);
  }
}

Html代码：

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

 汉化日期的取消确定按钮

Ts代码：

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

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

  public nowdate;
  //自定义Options
  public customPickerOptions = {
    buttons:[{
      text:'取消',
      handler:()=>console.log('Clicked Save!')
    },{
      text:'确定',
      handler:()=>console.log('Clicked Log.Do not Dismiss.')
    }
  ]}
  constructor() { }

  ngOnInit() {
  //执行当前时间的格式转换
  this.nowdate = sd.format(new Date(),'YYYY-MM-DD');
  }

}

Html代码：

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