110 lines
3.3 KiB
TypeScript
110 lines
3.3 KiB
TypeScript
import * as React from 'react';
|
||
import { PickerBaseProps, FormControlBaseProps } from '../@types/common';
|
||
|
||
export enum DATERANGE_DISABLED_TARGET {
|
||
CALENDAR = 'CALENDAR',
|
||
TOOLBAR_BUTTON_OK = 'TOOLBAR_BUTTON_OK',
|
||
TOOLBAR_SHORTCUT = 'TOOLBAR_SHORTCUT'
|
||
}
|
||
|
||
export type ValueType = [Date?, Date?];
|
||
|
||
export type DisabledDateFunction = (
|
||
/** Date used to determine if disabling is required. */
|
||
date: Date,
|
||
/** Date selected. */
|
||
selectDate?: ValueType,
|
||
/**
|
||
Whether to choose to finish now.
|
||
If `false`, only the start date is selected, waiting for the selection end date.
|
||
*/
|
||
selectedDone?: boolean,
|
||
// Call the target of the `disabledDate` function
|
||
target?: DATERANGE_DISABLED_TARGET
|
||
) => boolean;
|
||
|
||
export interface RangeType {
|
||
label: React.ReactNode;
|
||
closeOverlay?: boolean;
|
||
value: ValueType | ((value?: ValueType) => ValueType);
|
||
}
|
||
|
||
export interface DateRangePickerProps extends PickerBaseProps, FormControlBaseProps<ValueType> {
|
||
/** Configure shortcut options */
|
||
ranges?: RangeType[];
|
||
|
||
/** Format date */
|
||
format?: string;
|
||
|
||
/** The date range that will be selected when you click on the date */
|
||
hoverRange?: 'week' | 'month' | ((date: Date) => ValueType);
|
||
|
||
/** Whether to click once on selected date range，Can be used with hoverRange */
|
||
oneTap?: boolean;
|
||
|
||
/** ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day */
|
||
isoWeek?: boolean;
|
||
|
||
/** Set the lower limit of the available year relative to the current selection date */
|
||
limitEndYear?: number;
|
||
|
||
/** Whether to show week numbers */
|
||
showWeekNumbers?: boolean;
|
||
|
||
/** Show only one calendar select */
|
||
showOneCalendar?: boolean;
|
||
|
||
/** Set default date for calendar */
|
||
defaultCalendarValue?: ValueType;
|
||
|
||
/** Disabled date */
|
||
disabledDate?: (
|
||
date: Date,
|
||
selectDate: ValueType,
|
||
selectedDone: boolean,
|
||
target: DATERANGE_DISABLED_TARGET
|
||
) => boolean;
|
||
|
||
/** Called when the option is selected */
|
||
onSelect?: (date: Date, event?: React.SyntheticEvent<HTMLElement>) => void;
|
||
|
||
/** Called after clicking the OK button */
|
||
onOk?: (date: ValueType, event: React.SyntheticEvent<HTMLElement>) => void;
|
||
|
||
/** Called when clean */
|
||
onClean?: (event: React.SyntheticEvent<HTMLElement>) => void;
|
||
|
||
/** Custom render value */
|
||
renderValue?: (value: ValueType, format: string) => React.ReactNode;
|
||
}
|
||
|
||
interface DateRangePickerComponent extends React.ComponentClass<DateRangePickerProps> {
|
||
/** Allow the maximum number of days specified, other dates are disabled */
|
||
allowedMaxDays: (days: number) => DisabledDateFunction;
|
||
|
||
/** Only allowed days are specified, other dates are disabled */
|
||
allowedDays: (days: number) => DisabledDateFunction;
|
||
|
||
/** Allow specified date range, other dates are disabled */
|
||
allowedRange: (startDate: string | Date, endDate: string | Date) => DisabledDateFunction;
|
||
|
||
/** Disable dates after the specified date */
|
||
before: (beforeDate: string | Date) => DisabledDateFunction;
|
||
|
||
/** Disable dates before the specified date */
|
||
after: (afterDate: string | Date) => DisabledDateFunction;
|
||
|
||
/** Disable dates after today. */
|
||
beforeToday: () => DisabledDateFunction;
|
||
|
||
/** Disable dates before today */
|
||
afterToday: () => DisabledDateFunction;
|
||
|
||
/** Used to combine multiple conditions */
|
||
combine: (...args: any) => DisabledDateFunction;
|
||
}
|
||
|
||
declare const DateRangePicker: DateRangePickerComponent;
|
||
|
||
export default DateRangePicker;
|