Date Picker Example using Ionic


This tutorial, we're going to create Ionic date picker.

Our Goal

  • Display Current Date time inside  <ion-datetime></ion-datetime>
  • Set Maximum date to next 30 days
  • Display Picked date using Angular Date Pipe

Let's code

First, we need to create new ionic blank project

ionic start DatePicker blank
cd DatePicker

Let's create datetime components in src/app/home/home.html

    <ion-label position="stacked">DATE</ion-label>
    <ion-datetime [(ngModel)]="selectedDate" displayFormat="DD/MM/YYYY" min="{{today}}" max="{{nextThirty}}" value="{{today}}">

    <p>{{selectedDate | date: 'MMM dd, yyyy'}}</p>
  • Here we have set the min value as today & max value to nextThirty that, user can pick only the date between 30days.
  • we have alos assigned selectedDate model
  • Inside the <p> tag we have used Angular Date Pipe to format our date

Define today inside src/home.ts

import { Component } from '@angular/core'; 

  selector: 'app-home', 
  templateUrl: '', 
  styleUrls: [''], 
export class HomePage {

  constructor() { = new Date().toISOString();
    let now = new Date();
    now.setDate(now.getDate() + 30);
    this.nextThirty = now.toISOString();





ionic date picker example