Today I want to talk about date/time pickers in Ionic 2 framework because there are several ways to do it.
We will test it on two platforms available at the moment:
- Android 5.1 (Huawei Lua-L21)
- Chromium 56.0.2924.76 (LinuxMint 18 (64-bit))
HTML input Date/Time types
The first and probably the easiest way is to use HTML input type date.
Usage
<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>
Pros
The only advantage that I can see in this method is that it's simple and thats all.
Cons
- This method is browser-dependent. It means that on different browsers it could look/work in different ways. As you might already have noticed the datetime type is not working. In some previous versions of browsers it works, in some not...
- There are no additional features like validation, formatting, custom styles and etc. Basically it's the same input with a little seasoning.
Ionic 2 Date/Time Picker
If you didnt like the first method you can try official Ionic DateTime component. It similar to <select> on device.
Cons
- The only thing that I didn't like about it is that for example if you need to select date and time at once it gives you a bunch of unnamed columns.
Cordova / Ionic Native Date Time
The last and probably the best way to pick a date and time for me is native platform picker. For Ionic there is a wrapper.
Usage
Firstly we need to define our inputs.
<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>
Please keep in mind that I added
readonly="readonly" in order to prevent any text in those inputs. You can try focus/blur events if you want.Then we need to add handler for this
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)
)
}
