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

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

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

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

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

Options For Display & Picker

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