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