ionic 2 - 打开/关闭时离子日期时间的 css 样式答案

【问题标题】：ionic 2 - css style of ion-datetime on open/closeionic 2 - 打开/关闭时离子日期时间的 css 样式
【发布时间】：2017-03-27 06:03:16
【问题描述】：

我的 ionic-2 应用中有 startDate 和 endDate 选择器：

<ion-row>
    <ion-col width-50>
        <ion-item class="eventCal-datePicker active">
            <ion-label>From</ion-label>
            <ion-datetime #startdatepicker displayFormat="DD/MM/YYYY" (ngModelChange)="startDateChange($event)" [(ngModel)]="startDate"></ion-datetime>
        </ion-item>
    </ion-col>
    <ion-col width-50>
        <ion-item class="eventCal-datePicker">
            <ion-label>To</ion-label>
            <ion-datetime #enddatepicker displayFormat="DD/MM/YYYY" (ngModelChange)="endDateChange($event)" [(ngModel)]="endDate"></ion-datetime>
        </ion-item>
    </ion-col>
</ion-row>

我想应用以下逻辑：

将新日期分配给 startDate 时，将触发 endDate。
活动 ion-datetime 选择器的持有者 (ion-item) 应具有适当的 active css 类

我设法使用此代码打开了另一个选择器：

startDateChange(val) {
  this.startDate = val;

  //check whether startDate > endDate and asssign later date in case it is

  //fire endDate picker
  setTimeout(() => this.endDatePicker.open(), 0);
}

我无法做到的是在选择器被触发和关闭时更改 ion-item 的 css 类。

【问题讨论】：

标签： angular ionic-framework ionic2

【解决方案1】：

我意识到ion-datetime 元素也有(click) 属性：

<ion-datetime #enddatepicker (click)="setEndDatePickerClass()" ...

在setEndDatePickerClass()里面我打电话：

this.endDatePicker._isOpen

为了确定选择器状态，并且：

this.endDatePicker._elementRef.nativeElement.className

为了消除 css 类或分配一个新的类。

重要！！
注意滴答声延迟。我不确定事件的触发顺序，但我必须做一些杂技才能使其适用于所有用户案例。

【讨论】：

【解决方案2】：

ion-item [class]="yourDynamicClassName"

将类名赋给.ts中的变量yourDynamicClassName

【讨论】：

是的，但是知道如何将它绑定到 ion-datetime open/close 吗？？