fix: date pick range disable

src/date-picker/calendar/date-picker-panel/component.ts

@@ -23,6 +23,7 @@ import {
   updateDate,
   updateDateByTimeModel,
 } from '../util';
+import { HOUR_ITEMS, MINUTE_ITEMS, SECOND_ITEMS } from 'src/time-picker';
 
 @Component({
   selector: 'aui-date-picker-panel',
@@ -57,6 +58,17 @@ export class DatePickerPanelComponent extends CommonFormControl<Dayjs> {
 
   private _type: DatePickerType;
 
+  @Input()
+  set selectedTime(time: TimePickerModel) {
+    this._selectedTime = time;
+  }
+
+  get selectedTime() {
+    return this._selectedTime;
+  }
+
+  private _selectedTime: TimePickerModel;
+
   @Input()
   showTime = false;
 
@@ -98,7 +110,10 @@ export class DatePickerPanelComponent extends CommonFormControl<Dayjs> {
     type: keyof ReturnType<DisabledTimeFn>,
   ) {
     if (selectedDate !== this._cacheSelectedDate) {
-      this._cacheDisabledTimeFn = this.disabledTime(selectedDate);
+      this._cacheDisabledTimeFn = combineDisabledTimeFn(
+        this._disabledTimeFn.bind(this),
+        this.disabledTime,
+      )(selectedDate);
       this._cacheSelectedDate = selectedDate;
     }
     return this._cacheDisabledTimeFn?.[type];
@@ -114,8 +129,6 @@ export class DatePickerPanelComponent extends CommonFormControl<Dayjs> {
 
   selectedDate: Dayjs;
 
-  selectedTime: TimePickerModel;
-
   DateNavRange = DateNavRange;
   DatePickerType = DatePickerType;
 
@@ -159,11 +172,103 @@ export class DatePickerPanelComponent extends CommonFormControl<Dayjs> {
     if (!this.selectedDate) {
       return;
     }
+
     this.selectedDate = updateDateByTimeModel(this.selectedDate, time);
     this.emitValue(this.selectedDate);
   }
 
+  clearValue() {
+    this.selectedTime = null;
+    this.clear.next();
+  }
+
   setToday() {
     this.confirmValue(dayjs(), true);
   }
+
+  private _disabledTimeFn(selectedDate: ConfigType) {
+    const returnFnMap: Record<
+      keyof ReturnType<DisabledTimeFn>,
+      () => number[]
+    > = {
+      hours: () => [],
+      minutes: () => [],
+      seconds: () => [],
+    };
+
+    if (
+      selectedDate &&
+      this.minDate &&
+      (selectedDate as Dayjs)?.isSame(this.minDate, 'day')
+    ) {
+      returnFnMap.hours = () =>
+        HOUR_ITEMS.filter(item => item < this.minDate.hour());
+      returnFnMap.minutes = (hour?: number) => {
+        if (hour === this.minDate.hour()) {
+          return MINUTE_ITEMS.filter(item => item < this.minDate.minute());
+        }
+        return [];
+      };
+      returnFnMap.seconds = (hour?: number, minute?: number) => {
+        if (hour === this.minDate.hour() && minute === this.minDate.minute()) {
+          return SECOND_ITEMS.filter(item => item < this.minDate.second());
+        }
+        return [];
+      };
+    }
+
+    if (
+      selectedDate &&
+      this.maxDate &&
+      (selectedDate as Dayjs)?.isSame(this.maxDate, 'day')
+    ) {
+      returnFnMap.hours = () =>
+        HOUR_ITEMS.filter(item => item > this.maxDate.hour());
+      returnFnMap.minutes = (hour?: number) => {
+        if (hour === this.maxDate.hour()) {
+          return MINUTE_ITEMS.filter(item => item > this.maxDate.minute());
+        }
+        return [];
+      };
+      returnFnMap.seconds = (hour?: number, minute?: number) => {
+        if (hour === this.maxDate.hour() && minute === this.maxDate.minute()) {
+          return SECOND_ITEMS.filter(item => item > this.maxDate.second());
+        }
+        return [];
+      };
+    }
+
+    return returnFnMap;
+  }
+}
+
+function combineDisabledTimeFn(
+  ...disabledFnList: DisabledTimeFn[]
+): DisabledTimeFn {
+  return (date?: ConfigType) => ({
+    hours: () =>
+      Array.from(
+        new Set(
+          disabledFnList
+            .map(fn => fn(date)?.hours?.() || [])
+            .reduce((prev, cur) => [...prev, ...cur], []),
+        ),
+      ),
+    minutes: (hour?: number) =>
+      Array.from(
+        new Set(
+          disabledFnList
+            .map(fn => fn(date)?.minutes?.(hour) || [])
+            .reduce((prev, cur) => [...prev, ...cur], []),
+        ),
+      ),
+    seconds: (hour?: number, minute?: number) =>
+      Array.from(
+        new Set(
+          disabledFnList
+            .map(fn => fn(date)?.seconds?.(hour, minute) || [])
+            .reduce((prev, cur) => [...prev, ...cur], []),
+        ),
+      ),
+  });
 }

src/date-picker/calendar/date-picker-panel/template.html

@@ -17,6 +17,7 @@
     [weekStartDay]="weekStartDay"
     [minDate]="minDate"
     [maxDate]="maxDate"
+    [selectedTime]="selectedTime"
     [type]="type"
     [matchDates]="[selectedDate]"
     (select)="panelValueChange($event)"
@@ -30,7 +31,7 @@
 
   <ng-container *ngIf="showFooter">
     <aui-calendar-footer
-      (clear)="clear.next()"
+      (clear)="clearValue()"
       (confirm)="confirmValue()"
       [clearable]="clearable"
       [clearText]="clearText"

src/date-picker/calendar/panel/picker-panel.ts

@@ -35,6 +35,7 @@ import {
   getTypeByNavRange,
   sortDates,
 } from '../util';
+import { TimePickerModel } from 'src/time-picker';
 
 dayjs.extend(isBetween);
 
@@ -57,6 +58,9 @@ export class PickerPanelComponent implements OnChanges {
   @Input()
   anchor = dayjs();
 
+  @Input()
+  selectedTime: TimePickerModel;
+
   @Input()
   matchDates: Dayjs[];
 
@@ -85,8 +89,20 @@ export class PickerPanelComponent implements OnChanges {
 
   get disabledDateFn() {
     return composeDisabledDateFn(
-      date => this.minDate && date.isBefore(this.minDate),
-      date => this.maxDate && date.isAfter(this.maxDate),
+      date =>
+        this.minDate &&
+        date
+          .set('hour', this.selectedTime?.hour || 23)
+          .set('minute', this.selectedTime?.minute || 59)
+          .set('second', this.selectedTime?.second || 59)
+          .isBefore(this.minDate),
+      date =>
+        this.maxDate &&
+        date
+          .set('hour', this.selectedTime?.hour || 0)
+          .set('minute', this.selectedTime?.minute || 0)
+          .set('second', this.selectedTime?.second || 0)
+          .isAfter(this.maxDate),
       this.disabledDate,
     );
   }

src/time-picker/component.ts

@@ -3,7 +3,9 @@ import {
   Component,
   EventEmitter,
   Input,
+  OnChanges,
   Output,
+  SimpleChanges,
   TemplateRef,
   ViewChild,
   ViewEncapsulation,
@@ -23,6 +25,7 @@ import {
   TimePickerModel,
   isTimePickerModel,
 } from './time-picker.type';
+import { validResult } from './util';
 
 dayjs.extend(customParseFormat);
 
@@ -40,10 +43,10 @@ dayjs.extend(customParseFormat);
     },
   ],
 })
-export class TimePickerComponent extends CommonFormControl<
-  TimePickerDataLike,
-  TimePickerModel
-> {
+export class TimePickerComponent
+  extends CommonFormControl<TimePickerDataLike, TimePickerModel>
+  implements OnChanges
+{
   @Input()
   format = 'HH:mm:ss';
 
@@ -60,13 +63,13 @@ export class TimePickerComponent extends CommonFormControl<
   showIcon = true;
 
   @Input()
-  disableHours: () => number[];
+  disableHours?: () => number[];
 
   @Input()
-  disableMinutes: (hour?: number) => number[];
+  disableMinutes?: (hour?: number) => number[];
 
   @Input()
-  disableSeconds: (hour?: number, minute?: number) => number[];
+  disableSeconds?: (hour?: number, minute?: number) => number[];
 
   @Input()
   hourStep = 1;
@@ -92,8 +95,13 @@ export class TimePickerComponent extends CommonFormControl<
   timeValue: Dayjs = null;
   timeFormatValue = '';
 
+  private validResult = validResult({
+    hours: this.disableHours,
+    minutes: this.disableMinutes,
+    seconds: this.disableSeconds,
+  });
+
   override writeValue(value: TimePickerDataLike) {
-    super.writeValue(value);
     if (!value) {
       return this.setValue(null);
     }
@@ -104,7 +112,23 @@ export class TimePickerComponent extends CommonFormControl<
       result = dayjs(value);
       this.submit(false, result);
     }
-    this.setValue(result);
+    const validResult = this.validResult(result);
+    this.setValue(validResult);
+    super.writeValue(validResult);
+  }
+
+  ngOnChanges({ disableHours, disableMinutes, disableSeconds }: SimpleChanges) {
+    if (
+      this.disableHours !== disableHours?.currentValue ||
+      this.disableMinutes !== disableMinutes?.currentValue ||
+      this.disableSeconds !== disableSeconds?.currentValue
+    ) {
+      this.validResult = validResult({
+        hours: disableHours?.currentValue,
+        minutes: disableMinutes?.currentValue,
+        seconds: disableSeconds?.currentValue,
+      });
+    }
   }
 
   setValue(value: Dayjs) {