This article, I’m going to create Ionic 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

Create new ionic blank project

ionic start DatePicker blank

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>

Define today inside src/home.ts

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


Please login to download source code Login Here
Sundaravel M

About the author: Hey! It's me sundar. (Yea, I'm the founder of I'm a passionate computer programmer who loves modern web and mobile development. feel free to reach me : Facebook - Twitter - YouTube