离子 2 - 打开/关闭时离子日期时间的 CSS 样式

Question

我的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>

我想应用以下逻辑：

将
• 新日期分配给开始日期时，将触发结束日期。
• 活动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 类。

Answer 1

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

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

在setEndDatePickerClass()里面，我打电话：

this.endDatePicker._isOpen

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

this.endDatePicker._elementRef.nativeElement.className

为了挖掘CSS类或分配一个新的类。

重要！！
注意蜱虫延迟。我不确定事件的触发顺序，但我不得不做一些杂技才能使其在所有用户情况下都能正常工作。

Answer 2

ion-item [class]="yourDynamicClassName"

将类名分配给变量 yourDynamicClassName 在 .ts 中