feat(material/timepicker): support disabled/unavailable options

close #31842

Author: lekhmanrus

goldens/material/timepicker/index.api.md

@@ -99,13 +99,14 @@ export class MatTimepickerInput<D> implements ControlValueAccessor, Validator, O
     registerOnTouched(fn: () => void): void;
     registerOnValidatorChange(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
+    readonly shouldDisplayUnavailableItems: InputSignalWithTransform<boolean, unknown>;
     readonly timepicker: InputSignal<MatTimepicker<D>>;
     _timepickerValueAssigned(value: D | null): void;
     validate(control: AbstractControl): ValidationErrors | null;
     readonly value: ModelSignal<D | null>;
     writeValue(value: any): void;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatTimepickerInput<any>, "input[matTimepicker]", ["matTimepickerInput"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "timepicker": { "alias": "matTimepicker"; "required": true; "isSignal": true; }; "min": { "alias": "matTimepickerMin"; "required": false; "isSignal": true; }; "max": { "alias": "matTimepickerMax"; "required": false; "isSignal": true; }; "openOnClick": { "alias": "matTimepickerOpenOnClick"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatTimepickerInput<any>, "input[matTimepicker]", ["matTimepickerInput"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "timepicker": { "alias": "matTimepicker"; "required": true; "isSignal": true; }; "min": { "alias": "matTimepickerMin"; "required": false; "isSignal": true; }; "max": { "alias": "matTimepickerMax"; "required": false; "isSignal": true; }; "shouldDisplayUnavailableItems": { "alias": "matDisplayUnavailableItems"; "required": false; "isSignal": true; }; "openOnClick": { "alias": "matTimepickerOpenOnClick"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatTimepickerInput<any>, never>;
 }
@@ -122,6 +123,7 @@ export class MatTimepickerModule {
 
 // @public
 export interface MatTimepickerOption<D = unknown> {
+    disabled?: boolean;
     label: string;
     value: D;
 }

src/components-examples/material/timepicker/timepicker-options/timepicker-options-example.html

@@ -28,3 +28,19 @@ <h3>Custom list of options</h3>
     <mat-timepicker [options]="customOptions" #customPicker/>
   </mat-form-field>
 </div>
+
+<h3>Display unavailable options</h3>
+
+<div>
+  <mat-form-field>
+    <mat-label>Pick available option</mat-label>
+    <input
+      matInput
+      [matTimepicker]="displayAllPicker"
+      matDisplayUnavailableItems
+      matTimepickerMin="9:30"
+      matTimepickerMax="17:00">
+    <mat-timepicker-toggle matIconSuffix [for]="displayAllPicker"/>
+    <mat-timepicker #displayAllPicker/>
+  </mat-form-field>
+</div>

src/components-examples/material/timepicker/timepicker-options/timepicker-options-example.ts

@@ -15,7 +15,7 @@ import {provideNativeDateAdapter} from '@angular/material/core';
 export class TimepickerOptionsExample {
   customOptions: MatTimepickerOption<Date>[] = [
     {label: 'Morning', value: new Date(2024, 0, 1, 9, 0, 0)},
-    {label: 'Noon', value: new Date(2024, 0, 1, 12, 0, 0)},
+    {label: 'Noon', value: new Date(2024, 0, 1, 12, 0, 0), disabled: true},
     {label: 'Evening', value: new Date(2024, 0, 1, 22, 0, 0)},
   ];
 }

src/material/timepicker/timepicker-input.ts

@@ -140,6 +140,18 @@ export class MatTimepickerInput<D> implements ControlValueAccessor, Validator, O
     transform: (value: unknown) => this._transformDateInput<D>(value),
   });
 
+  /**
+   * Whether the input should display unavailable option items (if any), rather then filtering
+   * them out.
+   */
+  readonly shouldDisplayUnavailableItems: InputSignalWithTransform<boolean, unknown> = input(
+    false,
+    {
+      alias: 'matDisplayUnavailableItems',
+      transform: booleanAttribute,
+    },
+  );
+
   /**
    * Whether to open the timepicker overlay when clicking on the input. Enabled by default.
    * Note that when disabling this option, you'll have to provide your own logic for opening

src/material/timepicker/timepicker.html

@@ -11,6 +11,7 @@
     @for (option of _timeOptions; track option.value) {
       <mat-option
         [value]="option.value"
+        [disabled]="option.disabled"
         (onSelectionChange)="_selectValue($event.source)">{{option.label}}</mat-option>
     }
   </div>

src/material/timepicker/timepicker.ts

@@ -382,13 +382,25 @@ export class MatTimepicker<D> implements OnDestroy, MatOptionParentComponent {
       const timeFormat = this._dateFormats.display.timeInput;
       const min = input?.min() || adapter.setTime(adapter.today(), 0, 0, 0);
       const max = input?.max() || adapter.setTime(adapter.today(), 23, 59, 0);
-      const cacheKey =
-        interval + '/' + adapter.format(min, timeFormat) + '/' + adapter.format(max, timeFormat);
+      const shouldDisplayUnavailableItems = input?.shouldDisplayUnavailableItems() || false;
+      const cacheKey = [
+        interval,
+        adapter.format(min, timeFormat),
+        adapter.format(max, timeFormat),
+        shouldDisplayUnavailableItems ? 'displayUnavailable' : 'hideUnavailable',
+      ].join('/');
 
       // Don't re-generate the options if the inputs haven't changed.
       if (cacheKey !== this._optionsCacheKey) {
         this._optionsCacheKey = cacheKey;
-        this._timeOptions = generateOptions(adapter, this._dateFormats, min, max, interval);
+        this._timeOptions = generateOptions(
+          adapter,
+          this._dateFormats,
+          min,
+          max,
+          interval,
+          shouldDisplayUnavailableItems,
+        );
       }
     }
   }

src/material/timepicker/util.spec.ts

@@ -193,5 +193,41 @@ describe('timepicker utilities', () => {
       const options = generateOptions(adapter, formats, min, max, 3600).map(o => o.label);
       expect(options).toEqual(['1:00 PM']);
     });
+
+    it('should generate a list of options including unavailable items', () => {
+      const min = new Date(2024, 0, 1, 9, 0, 0, 0);
+      const max = new Date(2024, 0, 1, 22, 0, 0, 0);
+      const options = generateOptions(adapter, formats, min, max, 3600, true);
+      const enabledOptions = options.filter(o => !o.disabled).map(o => o.label);
+      expect(enabledOptions).toEqual([
+        '9:00 AM',
+        '10:00 AM',
+        '11:00 AM',
+        '12:00 PM',
+        '1:00 PM',
+        '2:00 PM',
+        '3:00 PM',
+        '4:00 PM',
+        '5:00 PM',
+        '6:00 PM',
+        '7:00 PM',
+        '8:00 PM',
+        '9:00 PM',
+        '10:00 PM',
+      ]);
+      const disabledOptions = options.filter(o => o.disabled).map(o => o.label);
+      expect(disabledOptions).toEqual([
+        '12:00 AM',
+        '1:00 AM',
+        '2:00 AM',
+        '3:00 AM',
+        '4:00 AM',
+        '5:00 AM',
+        '6:00 AM',
+        '7:00 AM',
+        '8:00 AM',
+        '11:00 PM',
+      ]);
+    });
   });
 });

src/material/timepicker/util.ts

@@ -39,6 +39,9 @@ export interface MatTimepickerOption<D = unknown> {
 
   /** Label to show to the user. */
   label: string;
+
+  /** Whether the option is disabled. */
+  disabled?: boolean;
 }
 
 /** Parses an interval value into seconds. */
@@ -88,17 +91,39 @@ export function generateOptions<D>(
   min: D,
   max: D,
   interval: number,
+  shouldDisplayUnavailableItems: boolean = false,
 ): MatTimepickerOption<D>[] {
   const options: MatTimepickerOption<D>[] = [];
-  let current = adapter.compareTime(min, max) < 1 ? min : max;
 
-  while (
-    adapter.sameDate(current, min) &&
-    adapter.compareTime(current, max) < 1 &&
-    adapter.isValid(current)
-  ) {
-    options.push({value: current, label: adapter.format(current, formats.display.timeOptionLabel)});
-    current = adapter.addSeconds(current, interval);
+  if (shouldDisplayUnavailableItems) {
+    const todayMin = adapter.setTime(adapter.today(), 0, 0, 0);
+    const todayMax = adapter.setTime(adapter.today(), 23, 59, 0);
+    let current = todayMin;
+    while (
+      adapter.sameDate(current, todayMin) &&
+      adapter.compareTime(current, todayMax) < 1 &&
+      adapter.isValid(current)
+    ) {
+      options.push({
+        value: current,
+        label: adapter.format(current, formats.display.timeOptionLabel),
+        disabled: adapter.compareTime(current, min) < 0 || adapter.compareTime(current, max) > 0,
+      });
+      current = adapter.addSeconds(current, interval);
+    }
+  } else {
+    let current = adapter.compareTime(min, max) < 1 ? min : max;
+    while (
+      adapter.sameDate(current, min) &&
+      adapter.compareTime(current, max) < 1 &&
+      adapter.isValid(current)
+    ) {
+      options.push({
+        value: current,
+        label: adapter.format(current, formats.display.timeOptionLabel),
+      });
+      current = adapter.addSeconds(current, interval);
+    }
   }
 
   return options;