ionic——日期组件

日期控件的基本使用

<ion-list>
       <ion-item>
          <ion-label>Date</ion-label>
           //display-format限制显示日期的格式      picker-format弹出框内选择控件的格式
          <ion-datetime display-format="YYYY-MM-DD" picker-format="MM DD YYYY " placeholder="选择日期"></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)]="day"></ion-datetime>
    </ion-item>
  </ion-list>


//在ts页面中赋给day的值要和display-format规定的格式一样，这样才能双向数据绑定。
day="2019-02-09"

对日期弹出框进行设置

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

    </ion-datetime>
  </ion-item>


//ts中写
 public customPickerOptions = {
    buttons: [{
      text: '取消',
      handler: () => console.log('Clicked 取消!')
    }, {
      text: '保存',
      handler: () => {
        console.log('Clicked 保存');
        console.log(this.nowDay);
      }
    }]
  }