Ionic 2 - Setting min and max attribute to ion-datetime

Question

I know this seems easy, but I could not find any answers for my question.

How can I set the min and/or max attributes to ion-datetime, but only for time picker?

<ion-row>
    <ion-col no-padding>
        <ion-item no-padding>
            <ion-label floating>Time In:</ion-label>
            <ion-datetime pickerFormat="hh:mm A" [(ngModel)]="ptReEvaluation.content.iprTimeIn"></ion-datetime>
        </ion-item>
    </ion-col>
</ion-row>

Answer 1

please try it

<ion-row>
    <ion-col no-padding>
        <ion-item no-padding>
            <ion-label floating>Time In:</ion-label>
            <ion-datetime pickerFormat="hh:mm A" [(ngModel)]="ptReEvaluation.content.iprTimeIn" in="2016" max="2020-10-31"></ion-datetime>
        </ion-item>
    </ion-col>
</ion-row>

i hope its work for you.

Answer 2

You should try this. In file.ts, declear

private minyear              : string        = (new Date().getFullYear()-1).toString();
private maxyear              : string        = (new Date().getFullYear()+1 + '-' + new Date().getMonth()+1 + '-' + new Date().getDate()).toString();

And in html side include as

<ion-datetime displayFormat="DD-MM-YYYY" pickerFormat="DD-MM-YYYY" [(ngModel)]="filter_param.start_date" placeholder="From" (ionChange)="validate_date_range()" [min]="minyear" [max]="maxyear"></ion-datetime>
<ion-datetime displayFormat="DD-MM-YYYY" pickerFormat="DD-MM-YYYY" [(ngModel)]="filter_param.end_date" placeholder="To" (ionChange)="validate_date_range()" [min]="minyear" [max]="maxyear"></ion-datetime>

I have put code on my conditions, you can append it to, with your requirements.

Answer 3

I tried this approach to get my bug cracked after crushing 6-7 days. In my case, I have to pass the getMinimum value as the minimum time while checking out. So users should not be able to check-out before the check-in time.

.ts File

check_in_value: 2021-12-06T13:15:11.684Z
const a = parseISO(check_in_value);
const b = addHours(new Date(a),5);
this.getMinimum = b.toISOString()
concole.log(this.getMinimum)

HTML File

<ion-datetime
displayFormat="YYYY-MM-DD HH:mm"
pickerFormat="YYYY-MM-DD HH:mm"
[value]="check_out"
[min]="getMinimum3"
></ion-datetime>

Important Notes:

The Displaying Format plays an important factor in rendering the Date and Time. Read the documentation thoroughly. “Ionic Framework uses the ISO 8601 datetime format for its value”. Link: ion-datetime: Ionic API Input for Datetime Format Picker

“Exactly the components shown here must be present, with exactly this punctuation” Link: https://ionicframework.com/docs/api/datetime?_gl=1*1lg7t6u*_ga*MTk3MzQ4NzM5Ny4xNjQxODg2ODQy*_ga_REH9TJF6KF*MTY1MDMyNDM1MS4xMTIuMS4xNjUwMzI2NjU0LjA.

“Exactly the components shown here must be present, with exactly this punctuation” Link: https://www.w3.org/TR/NOTE-datetime