У меня есть startDate и endDate сборщики в моем приложении ionic-2:

<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);
}

Что мне не удается сделать , так это изменить класс css ion-item, когда сборщик запущен и когда он закрыт.

0
guyaloni 23 Мар 2017 в 15:58

2 ответа

Лучший ответ

Я понял, что элемент ion-datetime также имеет атрибут (click):

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

Внутри setEndDatePickerClass() я звоню:

this.endDatePicker._isOpen

Для определения состояния сборщика и:

this.endDatePicker._elementRef.nativeElement.className

Для того, чтобы детерминировать класс CSS или назначить новый.

< Сильный > Важно !!
Будьте внимательны к задержкам клещей. Я не уверен, в каком порядке запускаются события, но мне пришлось заняться акробатикой, чтобы она работала во всех пользовательских случаях.

1
guyaloni 24 Мар 2017 в 10:57
ion-item [class]="yourDynamicClassName"

Присвойте имя класса переменной yourDynamicClassName в .ts

0
Suraj Rao 23 Мар 2017 в 13:11