Выбор даты и времени в Ionic 2

Сегодня я хочу поговорить о выборе даты/времени (date/time pickers) в Ionic 2 так как существует несколько способов сделать это.

Для тестирования будем использовать следующие платформы:

  • Android 5.1 (Huawei Lua-L21)
  • Chromium 56.0.2924.76 (LinuxMint 18 (64-bit))

HTML "input" Date/Time

Первый и вероятно самый простой способ - использовать HTML input с типом date.

Пример

<ion-list>
    <ion-item>
        <ion-label stacked color="primary">Date</ion-label>
        <ion-input type="date" placeholder="Enter Date" required="required"></ion-input>
    </ion-item>

    <ion-item>
        <ion-label stacked color="primary">Time</ion-label>
        <ion-input type="time" placeholder="Enter Time" required="required"></ion-input>
    </ion-item>

    <ion-item>
        <ion-label stacked color="primary">Datetime</ion-label>
        <ion-input type="datetime" placeholder="Enter Datetime" required="required"></ion-input>
    </ion-item>

    <ion-item>
        <ion-label stacked color="primary">Datetime-local</ion-label>
        <ion-input type="datetime-local" placeholder="Enter Datetime-local" required="required"></ion-input>
    </ion-item>
</ion-list>

Плюсы

  • Единственное преимущество которое я вижу в этом методе - простота использования.

Минусы

  • Этот метод является браузеро-зависиммый - это означает, что в разных браузерах он может выглядеть / работать по-разному. К примеру, как вы уже могли заметить, тип datetime не работает. А может и работает именно у вас - у всех по разному.
  • Нет никаких дополнительных возможностей, таких как: валидация, форматирование, пользовательские стили и т. д. В принципе, это тот всё тот же стандартный инпут с небольшой "приправой".

Ionic 2 Date/Time Picker

Если вам, как и мне, не понравился первый метод - можно попробовать предложенный самим иоником DateTime компонент. Он чем-то напоминает стандартный <select> на устройстве.

Ionic DateTime

Cons

  • Единственным минусом для меня оказалось то, что при выборе времени и даты оно получается всё в куче.

Cordova / Ionic Native Date Time

Последним и на мой взгляд самый удобным способом является нативный выбор даты. Для Ionic так же существует врапер.

Использование

Для начала нам нужно описать инпуты.

<ion-item>
    <ion-label stacked color="primary">Start</ion-label>
    <ion-input [(ngModel)]="start_date" type="text" placeholder="Enter start date" readonly="readonly" (focus)="$event.stopPropagation(); showDateTimePicker($event)"></ion-input>
</ion-item>

<ion-item>
    <ion-label stacked color="primary">End</ion-label>
    <ion-input [(ngModel)]="end_date" type="text" placeholder="Enter end date" readonly="readonly" (focus)="$event.stopPropagation(); showDateTimePicker($event)"></ion-input>
</ion-item>

Затем нам нужно добавить обработчик

showDateTimePicker(event) {
    this.DatePicker.show({
        date: new Date(),
        mode: 'datetime',
        is24Hour: true,
        androidTheme: this.DatePicker.ANDROID_THEMES.THEME_HOLO_DARK
    }).then(
        date => { event.target.value = date },
        err => console.log('Error occurred while getting date: ' + err)
    )
}
Fork me on GitHub