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.


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

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

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

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


The only advantage that I can see in this method is that it's simple and thats all.


  • 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.

Ionic DateTime


  • 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.


Firstly we need to define our inputs.

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

Then we need to add handler for this

showDateTimePicker(event) {{
        date: new Date(),
        mode: 'datetime',
        is24Hour: true,
        androidTheme: this.DatePicker.ANDROID_THEMES.THEME_HOLO_DARK
        date => { = date },
        err => console.log('Error occurred while getting date: ' + err)
Default Android HTML Date Time Picker Android HTML Date Picker Android HTML Time Picker Android HTML Time Picker