January 15, 2017

Ionic 2 DateTime

Ionic 2 DateTime DateTime component is used to create datepicker which enables user to select dates and times. Ionic’s datetime component enables us to create the datetime picker in preferred format. Here in this tutorial we are going to explain how you can create date time picker in Ionic 2. You can also use our online editor to edit and run the code online.

Ionic 2 DateTime Example

Let us first create very simple example of the DateTime –

Basic DateTime

It Contains two parts Html and JavaScript, Let us create one by one –

1. HTML Part – It contains the Html Part.
2. Script Part – This contains typescript code for the Alerts.

Html Part : demo.html

Ionic 2 DateTime Basic Eaxmple : Html

<ion-item>
  <ion-label>Date</ion-label>
  <ion-datetime displayFormat="MM/DD/YYYY" [(ngModel)]="event.month"></ion-datetime>
  </ion-item>
<ion-item>
  <ion-label>Start Time</ion-label>
  <ion-datetime displayFormat="h:mm A" pickerFormat="h mm A" [(ngModel)]="event.timeStarts"></ion-datetime> 
</ion-item>
<ion-item>
  <ion-label>Ends Time</ion-label>
  <ion-datetime displayFormat="h:mm A" pickerFormat="h mm A" [(ngModel)]="event.timeEnds"></ion-datetime>  
</ion-item>

JavaScript Part : demo.ts

Now let us create event function Which will add the default time, month and timeEnds in the dateTime Picker-

Ionic 2 DateTime Basic Eaxmple : Html

import { Component } from '@angular/core';

@Component({
  templateUrl: 'demo.html'
})
export class DemoPage {
 public event = {
   month: '2017-02-19',
    timeStarts: '07:43',
    timeEnds: '09:45'
  }
}

Try it »

The output of the above example will look something like this –

Ionic 2 Date Time Picker Example

Options For Display & Picker

Following Options are available for display and picker of DatTime which can used easily to format the options –

Format	Description	Example
YYYY	Year, 4 digits	2018
YY	Year, 2 digits	18
M	Month	1 … 12
MM	Month, leading zero	01 … 12
MMM	Month, short name	Jan
MMMM	Month, full name	January
D	Day	1 … 31
DD	Day, leading zero	01 … 31
DDD	Day, short name	Fri
DDDD	Day, full name	Friday
H	Hour, 24-hour	0 … 23
HH	Hour, 24-hour, leading zero	00 … 23
h	Hour, 12-hour	1 … 12
hh	Hour, 12-hour, leading zero	01 … 12
a	12-hour time period, lowercase	am pm
A	12-hour time period, uppercase	AM PM
m	Minute	1 … 59
mm	Minute, leading zero	01 … 59
s	Second	1 … 59
ss	Second, leading zero	01 … 59
Z	UTC Timezone Offset	Z or +HH:mm or -HH:mm