Сегодня я хочу поговорить о выборе даты/времени (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>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#android-html-date-time-picker" role="tab" data-toggle="tab">Android</a></li>
<li role="presentation"><a href="#chromium-html-date-time-picker" role="tab" data-toggle="tab">Chromium</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="android-html-date-time-picker" style="padding: 20px">
<a href="http://nonamez.name/storage/2017/03/31/android-native-date-time-default_zr9iy.png">
<img alt="Default Android HTML Date Time Picker" class="img-thumbnail" src="http://nonamez.name/storage/2017/03/31/android-native-date-time-default_zr9iy.png" style="width: 140px; height: 140px;">
</a>
<a href="http://nonamez.name/storage/2017/03/31/android-native-date_tlxl3.png">
<img alt="Android HTML Date Picker" class="img-thumbnail" src="http://nonamez.name/storage/2017/03/31/android-native-date_tlxl3.png" style="width: 140px; height: 140px;">
</a>
<a href="http://nonamez.name/storage/2017/03/31/android-native-time_zt8ki.png">
<img alt="Android HTML Time Picker" class="img-thumbnail" src="http://nonamez.name/storage/2017/03/31/android-native-time_zt8ki.png" style="width: 140px; height: 140px;">
</a>
<a href="http://nonamez.name/storage/2017/03/16/android-html-date-time-local-picker_tjfs5.png">
<img alt="Android HTML Date Time Local Picker" class="img-thumbnail" src="http://nonamez.name/storage/2017/03/16/android-html-date-time-local-picker_tjfs5.png" style="width: 140px; height: 140px;">
</a>
<a href="http://nonamez.name/storage/2017/03/16/android-html-date-time-picker-after_04oqt.png">
<img alt="Android HTML Date Time After Picked" class="img-thumbnail" src="http://nonamez.name/storage/2017/03/16/android-html-date-time-picker-after_04oqt.png" style="width: 140px; height: 140px;">
</a>
</div>
<div role="tabpanel" class="tab-pane" id="chromium-html-date-time-picker" style="padding: 20px">
<a href="http://nonamez.name/storage/2017/03/16/chromium-html-date-picker-default_jnfgg.png">
<img alt="Default Chromium HTML Date Time Picker" class="img-thumbnail" src="http://nonamez.name/storage/2017/03/16/chromium-html-date-picker-default_jnfgg.png" style="width: 140px; height: 140px;">
</a>
<a href="http://nonamez.name/storage/2017/03/16/chromium-html-date-picker_sewkk.png">
<img alt="Chromium HTML Date Picker" class="img-thumbnail" src="http://nonamez.name/storage/2017/03/16/chromium-html-date-picker_sewkk.png" style="width: 140px; height: 140px;">
</a>
<a href="http://nonamez.name/storage/2017/03/16/chromium-html-time-picker_psmrf.png">
<img alt="Chromium HTML Time Picker" class="img-thumbnail" src="http://nonamez.name/storage/2017/03/16/chromium-html-time-picker_psmrf.png" style="width: 140px; height: 140px;">
</a>
<a href="http://nonamez.name/storage/2017/03/16/chromium-html-date-time-local-picker_jxtjw.png">
<img alt="Chromium HTML Date Time Local Picker" class="img-thumbnail" src="http://nonamez.name/storage/2017/03/16/chromium-html-date-time-local-picker_jxtjw.png" style="width: 140px; height: 140px;">
</a>
<a href="http://nonamez.name/storage/2017/03/16/chromium-html-date-time-picker-after_5fcyw.png">
<img alt="Chromium HTML Date Time After Picked" class="img-thumbnail" src="http://nonamez.name/storage/2017/03/16/chromium-html-date-time-picker-after_5fcyw.png" style="width: 140px; height: 140px;">
</a>
</div>
</div>
Плюсы
- Единственное преимущество которое я вижу в этом методе - простота использования.
Минусы
- Этот метод является браузеро-зависиммый - это означает, что в разных браузерах он может выглядеть / работать по-разному. К примеру, как вы уже могли заметить, тип datetime не работает. А может и работает именно у вас - у всех по разному.
- Нет никаких дополнительных возможностей, таких как: валидация, форматирование, пользовательские стили и т. д. В принципе, это тот всё тот же стандартный инпут с небольшой "приправой".
Ionic 2 Date/Time Picker
Если вам, как и мне, не понравился первый метод - можно попробовать предложенный самим иоником DateTime компонент. Он чем-то напоминает стандартный <select> на устройстве.
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>
Пожалуйста, имейте в виду, что я добавил
readonly="readonly" чтобы предотвратить любой текст в этих инпутах.Затем нам нужно добавить обработчик
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)
)
}
