* datetime-picker: add callback to set date allowed to select.

easysoft · Oct 13, 2024 · 4ce5c90 · 4ce5c90
1 parent ae88a53
commit 4ce5c90
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 4 deletions.
diff --git a/lib/datetime-picker/src/component/date-picker-menu.tsx b/lib/datetime-picker/src/component/date-picker-menu.tsx
@@ -150,6 +150,7 @@ export class DatePickerMenu extends Component<DatePickerMenuProps, DatePickerMen
                                     month={month}
                                     selections={currentDate || []}
                                     onClickDate={this.changeDate}
+                                    isDateAllowed={props.isDateAllowed}
                                 />
                             )
                             : null

diff --git a/lib/datetime-picker/src/component/date-picker.tsx b/lib/datetime-picker/src/component/date-picker.tsx
@@ -75,7 +75,7 @@ export class DatePicker<T extends DatePickerOptions = DatePickerOptions> extends
 
     _parseDate(value: string): Date | null {
         const date = getDate(value);
-        return date ? campDate(date, ...this._getDateRange(value)) : null;
+        return (date && this._isDateAllowed(date)) ? campDate(date, ...this._getDateRange(value)) : null;
     }
 
     _afterSetDate() {
@@ -147,8 +147,12 @@ export class DatePicker<T extends DatePickerOptions = DatePickerOptions> extends
         };
     }
 
+    protected _isDateAllowed = (date: Date): boolean => {
+        return this.props.isDateAllowed?.call(this, date) ?? true;
+    };
+
     _renderPop(props: T, state: PickState): ComponentChildren {
-        const {weekNames, monthNames, weekStart, yearText, todayText, clearText, menu, actions, required} = props;
+        const {weekNames, monthNames, weekStart, yearText, todayText, clearText, menu, actions, required, isDateAllowed} = props;
         const [minDate, maxDate] = this._getDateRange(state.value);
         return (
             <DatePickerMenu
@@ -164,6 +168,7 @@ export class DatePicker<T extends DatePickerOptions = DatePickerOptions> extends
                 actions={actions}
                 minDate={minDate}
                 maxDate={maxDate}
+                isDateAllowed={isDateAllowed ? this._isDateAllowed : undefined}
             />
         );
     }

diff --git a/lib/datetime-picker/src/component/mini-calendar.tsx b/lib/datetime-picker/src/component/mini-calendar.tsx
@@ -47,6 +47,7 @@ export class MiniCalendar extends Component<MiniCalendarProps> {
             selections = [],
             maxDate,
             minDate,
+            isDateAllowed,
         } = props;
         const weekNamesView: ComponentChild[] = [];
         const btnClass = 'btn ghost square rounded-full';
@@ -79,7 +80,7 @@ export class MiniCalendar extends Component<MiniCalendarProps> {
                     'is-out-month': !isInMonth,
                     'is-today': isSameDay(day, now),
                     'is-weekend': weekDay === 0 || weekDay === 6,
-                    disabled: !isSameDay(day, maxDateTime) && !isSameDay(day, minDateTime) && (time > maxDateTime || time < minDateTime),
+                    disabled: (isDateAllowed && !isDateAllowed(day)) || ((time > maxDateTime || time < minDateTime) && !isSameDay(day, maxDateTime) && !isSameDay(day, minDateTime)),
                 });
                 rowDays.push(
                     <div className={className} key={dateStr} data-date={dateStr}>

diff --git a/lib/datetime-picker/src/types/date-picker-menu-props.ts b/lib/datetime-picker/src/types/date-picker-menu-props.ts
@@ -14,4 +14,5 @@ export type DatePickerMenuProps = {
     actions?: ToolbarSetting;
     minDate?: Date | null;
     maxDate?: Date | null;
+    isDateAllowed?: (date: Date) => boolean;
 };
diff --git a/lib/datetime-picker/src/types/date-picker-options.ts b/lib/datetime-picker/src/types/date-picker-options.ts
@@ -9,7 +9,7 @@ export interface DatePickerOptions extends PickOptions {
     readonly?: boolean;
     placeholder?: string;
     format?: string | ((date: Date) => string);
-    display?: (value: string, date: Date | null) => string;
+    display?: (value: string, date: Date | undefined | null) => string;
     icon?: IconType | boolean;
     weekNames?: string[];
     monthNames?: string[];
@@ -19,6 +19,7 @@ export interface DatePickerOptions extends PickOptions {
     weekStart?: number;
     minDate?: DateLike | ((value?: string) => DateLike);
     maxDate?: DateLike | ((value?: string) => DateLike);
+    isDateAllowed?: (date: Date) => boolean;
     menu?: NavSetting;
     actions?: ToolbarSetting;
     allowInvalid?: boolean;

diff --git a/lib/datetime-picker/src/types/mini-calendar-props.ts b/lib/datetime-picker/src/types/mini-calendar-props.ts
@@ -6,6 +6,7 @@ export type MiniCalendarProps = {
     monthNames?: string[];
     minDate?: DateLike;
     maxDate?: DateLike;
+    isDateAllowed?: (date: Date) => boolean;
     year?: number;
     month?: number;
     selections?: DateLike | DateLike[];