/home/NoNameZ

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>

• Android
• Chromium

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>

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