Checkout MyThemeBox.com for Ionic & Flutter Themes

Date Picker Example using Ionic

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:any
    constructor() {
        this.today = new Date().toISOString(); 
    }

}