ionic 日期插件学习

Posted 2020-11-06 睡到自然醒

<ion-header>
  <ion-navbar>
    <ion-title>
      DateTime
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="outer-content">

  <ion-list>
    <ion-item>
      <ion-input placeholder="Title"></ion-input>
    </ion-item>
    <ion-item>
      <ion-input placeholder="Location"></ion-input>
    </ion-item>
  </ion-list>

  <ion-list>
    <ion-item>

      <ion-label>Start Date</ion-label>
      <ion-datetime displayFormat="MMM DD YYYY" [(ngModel)]="event.month"></ion-datetime>
    </ion-item>


    <ion-item>
      <ion-label>Start Time</ion-label>
      <ion-datetime displayFormat="h:mm A" pickerFormat="h mm A" [(ngModel)]="event.timeStarts"></ion-datetime>
    </ion-item>

    <ion-item>
      <ion-label>Ends</ion-label>
      <ion-datetime displayFormat="MMM DD YYYY" [(ngModel)]="event.timeEnds"></ion-datetime>
    </ion-item>

    <button ion-item>
      <ion-label>Repeat</ion-label>
      <ion-note item-end>Never</ion-note>
    </button>

    <button ion-item>
      <ion-label>Travel Time</ion-label>
      <ion-note item-end>None</ion-note>
    </button>
  </ion-list>

  <ion-list>
    <button ion-item>
      <ion-label>Alert</ion-label>
      <ion-note item-end>None</ion-note>
    </button>
  </ion-list>

</ion-content>

<style>
  ion-list:first-child {
    margin-top: 32px;
  }
  ion-list + ion-list {
    margin-top: 0;
  }
</style>

注意点：

在标签内需要赋值给两个按钮，否则展示内容为英文。

<ion-datetime cancelText="取消" doneText="确认" displayFormat="YYYY-MM-DD" [(ngModel)]="myDate"></ion-datetime>

 

 

 

变量值： 
 public event = {
    month: ‘1990-02-19‘,
    timeStarts: ‘07:43‘,
    timeEnds: ‘1990-02-20‘
  }