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 the latest source code

To avoid spam user, we only have social login • we do not post anything on your wall

Secured • No Spam

Sundaravel M

About the author: Hi! I'm Sundaravel (codesundar), Founder of I have been a Web, Mobile App developer, Author, and Teacher since 2014. I also worked as a software consultant for fortune 500 companies. I created to share my real-time knowledge in various technologies such as PhoneGap, Ionic, Flutter and more.