ionic-date-picker-example
ionic-date-picker-example
ionic-date-picker-example

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

STEPS
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>
</ion-content>

Define today inside src/home.ts

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

OUTPUT

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 codesundar.com. 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 codesundar.com to share my real-time knowledge in various technologies such as PhoneGap, Ionic, Flutter and more.