CODEWITHSUNDEEP
javascriptangularionic-frameworkionic-nativeionic5
Pritesh Bhoi
Pritesh Bhoi

Reputation: 1096

Ionic 5 - Set Today is MIN Day

I am using Ionic 5.
I am trying to make today is my [min] date.

So users can select today and days after today.

my code is

 minDate: any = new Date(new Date().setFullYear(new Date().getDate() - 0)).toISOString();


 <ion-datetime class="ion-no-padding top-padding" display-timezone="utc" displayFormat="DD/MM/YYYY" [min]='minDate'>
 </ion-datetime>

Ex= Today is 18 Jun 2021

so users can select the same and after the date of 18 Jun 2021.

= 18 Jun 2021

= 19 Jun 2021

.

.

.

any date after 18 Jun 2021

Upvotes: 3

Views: 1723

Answers (2)

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17610

Demo you can use like this

<ion-datetime class="ion-no-padding top-padding" display-timezone="utc" displayFormat="DD/MM/YYYY" min="{{minDate}}"max="2100-12-31" ></ion-datetime>

in component

 minDate: any = new Date().toISOString();

Upvotes: 2

Mansi Mistry
Mansi Mistry

Reputation: 189

You can use following code for this purpose :

Please install moment library for use anykind of datetime format :

npm install moment --save

and in your .ts file put this :

MinDate :any;

this.MinDate = moment('18/06/2021', "YYYY-MM-DD").add('days', 1).format("YYYY-MM-DD");

and in Todate of HTML code put inside <ion-datetime> tag

  <ion-datetime formControlName="ToDate" displayFormat="DD/MM/YYYY" 
                    [min]=MinDate
                      required></ion-datetime>

output :

it will Open Datepicker from 19/06/2021 it won't let you select date 18/06/2021 and before this dates.

Upvotes: 1

Related Questions