Date Picker Example using Ionic

ionic-date-picker-example

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

    <p>{{selectedDate | date: 'MMM dd, yyyy'}}</p>
</ion-item>
  • Here we have set the min value as today & max value to nextThirty variable.so 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'; 

@Component({
  selector: 'app-home', 
  templateUrl: 'home.page.html', 
  styleUrls: ['home.page.scss'], 
})
export class HomePage {
  today; 
  nextThirty; 
  selectedDate; 

  constructor() {

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

  }

}

Output

ionic-date-picker-example

ionic date picker example

Reference