diff --git a/lib/datetime-picker/src/component/date-picker-menu.tsx b/lib/datetime-picker/src/component/date-picker-menu.tsx index 888b0c30d0..c6f3859c24 100644 --- 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 ) : null diff --git a/lib/datetime-picker/src/component/date-picker.tsx b/lib/datetime-picker/src/component/date-picker.tsx index f62b138843..2c86dd7a6b 100644 --- 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 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 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 ( 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 index 31aa486e77..fc4c18bec7 100644 --- 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 { selections = [], maxDate, minDate, + isDateAllowed, } = props; const weekNamesView: ComponentChild[] = []; const btnClass = 'btn ghost square rounded-full'; @@ -79,7 +80,7 @@ export class MiniCalendar extends Component { '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(
diff --git a/lib/datetime-picker/src/types/date-picker-menu-props.ts b/lib/datetime-picker/src/types/date-picker-menu-props.ts index 85d5c474c4..78d3f971ef 100644 --- 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 index eff9402596..bee4473038 100644 --- 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 index 5ec264d5d5..9c51527bf1 100644 --- 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[];