Set min and max value in ngx-bootstrap Timepicker with popover

90 views Asked by At

I have an NGX Bootstrap Timepicker component as follow:

<ng-template #myRef>
  <timepicker
    id="minTimeStoppedAdvanceId"
    [showMeridian]="false"
    [showSeconds]="true"
    [minuteStep]="1"
    [secondsStep]="1"
    [formControlName]="'minTimeStopped'"
  ></timepicker>
</ng-template>
<input
  [ngClass]="{
    'ng-dirty': getPeriod(i).get('minTimeStopped').dirty
  }"
  class="form-control text-center input-time-padding"
  type="text"
  [popover]="myRef"
  [outsideClick]="true"
  placement="bottom"
  [value]="getPeriod(i).get('minTimeStopped').value | inputTime : 'mm:ss'"
  (change)="onChangeInputTimeWithKeyboard(i, $event, 'minTimeStopped')"
/>

I have followed this example on how to set min/max values for a timepicker (a max value of 30 minutes in my case). The problem is that I'm using a popover to display a modal and set the time value there.

Popover

stoppedMinTime: Date = new Date();

constructor() {
  this.stoppedMaxTime.setMinutes(30);
}
<ng-template #myRef>
  <timepicker
    id="minTimeStoppedAdvanceId"
    [showMeridian]="false"
    [showSeconds]="true"
    [minuteStep]="1"
    [secondsStep]="1"
    [formControlName]="'minTimeStopped'"
    [max]="stoppedMaxTime"
  ></timepicker>
</ng-template>

If I try the code above, the max value doesn't work, but if I use documentation example the code works and I'm completely sure that it is because of the popover.

0

There are 0 answers