Ionic 2 Date Picker Example

Ionic 2 Date Picker Example
Ionic 2 Date Picker Example
Ionic 2 Date Picker Example

This article, I’m going to create Ionic 2 date picker example using typescript.

Our Goal:

  • Display Current Date time inside <ion-datetime></ion-datetime> Tag
  • Open DatePicker for choose other date & change date

DOWNLOAD SOURCE CODE

STEPS
Create new ionic blank project

ionic start DatePicker blank --v2

create DateTime tag src/home.html with two-way(ngModel) binding

<ion-content padding>
 <ion-datetime displayFormat="DD-MM-YYYY HH:mm" [(ngModel)]="today"></ion-datetime>
</ion-content>

Define today inside src/home.ts

import { Component } from [email protected]/core';
@Component({
 selector: 'page-home',
 templateUrl: 'home.html'
})
export class HomePage {
 today
 constructor() {
 this.today = new Date().toISOString();
 }
}

OUTPUT

DOWNLOAD SOURCE CODE

  • How to show this as a calendar?

  • Inzamam Mashood Nasir

    How to set the Min and Max dates in this controller ? Can you guide please??