Ion-datetime min/max for hours doesn’t works

Question

I'm trying to implement a min and max attributes for datepickers. So i have two datepickers, one for start and another for the end, both just pick hours and minutes

<ion-row>
  <ion-col width-45>
    <ion-item>
      <ion-datetime formControlName="start" displayFormat="HH:mm" min="{{minStart}}" max="{{maxStart}}" pickerFormat="HH mm" doneText="Ok" cancelText="Cancelar" (ionChange)="changeHours()"></ion-datetime>
    </ion-item>
  </ion-col>
  <ion-col width-45>
    <ion-item>
      <ion-datetime formControlName="end" displayFormat="HH:mm" min="{{minEnd}}" max="{{maxEnd}}" pickerFormat="HH mm" doneText="Ok" cancelText="Cancelar" (ionChange)="changeHours()"></ion-datetime>
    </ion-item>
  </ion-col>
</ion-row>

In my ts file i have the variables and my changeHours() that i'm using to update the min and max values, and i'm using Moment.js to create and manipulate the dates

minDate: string = Moment().toDate().toISOString(); // i'm using this for other stuff too
minStart: string = Moment().toDate().toISOString();
maxStart: string = Moment().toDate().toISOString();
minEnd: string = Moment().toDate().toISOString();
maxEnd: string = Moment().format('YYYY-MM-DDT') + '23:59';

changeHours() {
    let start= this.novoAtendimento.get('start').value;
    let end= this.novoAtendimento.get('end').value;

    if (ini != null && term == null) {
        this.minEnd= Moment(this.minDate).format('YYYY-MM-DDT') + start; //output is '2017-02-23T05:00' if i choose 05 00 in the picker
    } else {
        this.maxStart= Moment(this.minDate).format('YYYY-MM-DDT') + end;
    }
}

So this is basically what i have, i've also tried just the hour and minute in HH:mm format and HH mm (i know it isn't a ISO 8601 format, but it doesn't hurt to try).

I've seen one guy updating it via the picker component to create a custom picker with the values he wants, but i think it's a ugly way since i can have a min/max attribute. And having in mind it's a dynamic field i don't want to call a method to create a new picker everytime the user changes the start or end datetime (but if it's the only way i'll use this picker component).

So, how can i create a "fence" for my picker hours so the user can't select a end value that's smaller than the start value and vice versa? Does ionic 2 datetime min and max works just for hours and minutes?

Answer 1

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"

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