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

Ionic Framework ionic-v3
1

Hi everyone. 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;
    } 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 type of ISO 8601, 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?

1 Like