Question

我的ionic-2 app中有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-item选择器的持有者（ion-datetime）应该有一个合适的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"

将班级名称分配给.ts

中的变量yourDynamicClassName

开放/关闭时离子2 - css样式的离子日期时间

2 个答案: