angular-material-components icon indicating copy to clipboard operation
angular-material-components copied to clipboard

Filter hours during a day

Open AlexElin opened this issue 3 years ago • 1 comments

I want to prohibit selecting some hours during a day. Setting [ngxMatDatetimePickerFilter] doesn't help. It doesn't affect choosing hours

In the template

  <mat-form-field>
    <mat-label>Date</mat-label>
<!--    set readonly to protect from manually entered seconds and minutes-->
    <input matInput [(ngModel)]="date"
         [min]="data.min"
         [max]="data.max"
         [ngxMatDatetimePickerFilter]="filter"
         name="since"
         [ngxMatDatetimePicker]="picker" readonly required>
    <mat-datepicker-toggle matSuffix [for]="$any(picker)"></mat-datepicker-toggle>
    <ngx-mat-datetime-picker #picker
        [stepHour]="1"
        [disableMinute]="true"></ngx-mat-datetime-picker>
  </mat-form-field>

In the component

  filter = (date: Date | null): boolean => {
    return !date || !this.data.filtered.some(d => d.equals(date));
  }

AlexElin avatar Jun 18 '21 15:06 AlexElin

+1 Same requirement for me.

@h2qutc Need this minHour and maxHour as the requirement does, I've added a pull request to incorporate this feature. #228 Thanks.

silambarasan-r avatar Nov 11 '21 06:11 silambarasan-r