Agranom / ngx-material-timepicker

Material desing timepicker for Angular 6.0+
https://agranom.github.io/ngx-material-timepicker/
MIT License
342 stars 139 forks source link

Dynamic min/max on timepicker-field #393

Open scottboyd-ai opened 3 years ago

scottboyd-ai commented 3 years ago

I'm attempting to set the min and max values for a start and end time field based on each other.

<form [formGroup]="formGroup" class="form">
    <div fxLayout="column" fxLayoutAlign="space-around start">

     <mat-form-field class="form-element">
        <ngx-timepicker-field formControlName="startTime" defaultTime="startTime" [max]="formGroup.value.end.toString()"></ngx-timepicker-field>
        <input matInput [hidden]="true" formControlName="startTime">
      </mat-form-field>

      <mat-form-field class="form-element">
        <ngx-timepicker-field formControlName="end" defaultTime="end" [min]="formGroup.value.startTime.toString()"></ngx-timepicker-field>
        <input matInput [hidden]="true" formControlName="end">
      </mat-form-field>
  </form>

As an example, I have an event that occurs between 3:00 PM and 4:00PM. I open this component and adjust the start time to 2:00 PM and I want to move the end time to 3:00 PM. I am able to adjust the start time back one hour, but I cannot adjust the end time back. I am able to do this if I open the time picker overlay, but not in the timepicker-field.

The start time does not appear to have this problem. If I were instead to change the event to run between 4:00 and 5:00, I can successfully adjust the end time to 5 and the start time to 4.

DR0105 commented 2 years ago

Could you fix it? I'm in the same predicament.