react-multi-date-picker
Version:
A simple React datepicker component for working with gregorian, persian, arabic and indian calendars with the ability to select the date by single, multiple, range and multiple range pickers.
836 lines (786 loc) • 21.3 kB
TypeScript
declare module "react-multi-date-picker" {
import React, { HTMLAttributes } from "react";
import DateObject, { Calendar, Locale } from "react-date-object";
export type Value = Date | string | number | DateObject | null;
export type FunctionalPlugin = { type: string; fn: Function };
export type Plugin = React.ReactElement | FunctionalPlugin;
type TValue<
Multiple extends boolean = false,
Range extends boolean = false,
V extends Value = Value
> = Multiple extends false
? Range extends false
? V
: V[]
: Range extends false
? V[]
: V[][];
export type ChangedValue<
Multiple extends boolean = false,
Range extends boolean = false
> = Multiple extends false
? Range extends false
? DateObject | null
: DateObject[]
: Range extends false
? DateObject[]
: DateObject[][];
export type MapDaysProps<
Multiple extends boolean = false,
Range extends boolean = false
> = {
date: DateObject;
today: DateObject;
selectedDate: TValue<Multiple, Range, DateObject>;
currentMonth: DateObject["month"];
isSameDate(arg1: DateObject, arg2: DateObject): boolean;
};
export type HeaderItem =
| "MONTH_YEAR"
| "YEAR_MONTH"
| "LEFT_BUTTON"
| "RIGHT_BUTTON";
export type CustomComponentProps = {
value?: string;
openCalendar?: () => void;
onFocus?: () => void;
handleValueChange?: (e: React.ChangeEvent) => void;
onChange?: (e: React.ChangeEvent) => void;
locale?: Locale;
separator?: string;
};
export interface CalendarProps<
Multiple extends boolean = false,
Range extends boolean = false
> {
ref?: React.MutableRefObject<any>;
/**
* @types Date | string | number | DateObject
* @types Date[] | string[] | number[] | DateObject[]
* @example
* <Calendar value={new Date()} />
* <DatePicker value={[new Date(), new Date(2020, 2, 12)]} />
*/
value?: TValue<Multiple, Range>;
/**
* default calendar is gregorian.
*
* if you want to use other calendars instead of gregorian,
* you must import it from "react-date-object"
*
* Availble calendars:
*
* - gregorian
* - persian
* - arabic
* - indian
*
* @example
* import persian from "react-date-object/calendars/persian"
* <Calendar calendar={persian} />
*
* import indian from "react-date-object/calendars/indian"
* <DatePicker calendar={indian} />
*/
calendar?: Calendar;
/**
* default locale is gregorian_en.
*
* if you want to use other locales instead of gregorian_en,
* you must import it from "react-date-object"
*
* Availble locales:
*
* - gregorian_en
* - gregorian_fa
* - gregorian_ar
* - gregorian_hi
* - persian_en
* - persian_fa
* - persian_ar
* - persian_hi
* - arabic_en
* - arabic_fa
* - arabic_ar
* - arabic_hi
* - indian_en
* - indian_fa
* - indian_ar
* - indian_hi
*
* @example
* import gregorian_fa from "react-date-object/locales/gregorian_fa"
* <Calendar locale={gregorian_fa} />
*
* import gregorian_ar from "react-date-object/locales/gregorian_ar"
* <DatePicker locale={gregorian_ar} />
*/
locale?: Locale;
/**
* @type string
* @default "YYYY/MM/DD"
* @see https://shahabyazdi.github.io/react-multi-date-picker/format-tokens/
* @example
* <Calendar format="MM/DD/YYYY hh:mm:ss a" />
*
* <DatePicker format="MM-DD-YYYY HH:mm:ss" />
*/
format?: string;
onlyMonthPicker?: boolean;
onlyYearPicker?: boolean;
/**
* @example
* <Calendar
* value={[new Date(2020,10,10), new Date(2020,10,14)]}
* range
* />
*
* <DatePicker range />
*/
range?: Range;
/**
* @example
* <Calendar
* value={[new Date(2020,10,10), new Date(2020,10,14)]}
* multiple
* />
*
* <DatePicker multiple />
*/
multiple?: Multiple;
/**
* Calendar wrapper className
*/
className?: string;
/**
* @see https://shahabyazdi.github.io/react-multi-date-picker/locales/
* @example
* <Calendar
* weekDays={[
* "SU",
* "MO",
* "TU",
* "WE",
* "TH",
* "FR",
* "SA"
* ]}
* />
*/
weekDays?: string[] | Array<string[]>;
/**
* @see https://shahabyazdi.github.io/react-multi-date-picker/locales/
* @example
* <Calendar
* months={[
* "jan",
* "feb",
* "mar",
* "apr",
* "may",
* "jun",
* "jul",
* "aug",
* "sep",
* "oct",
* "nov",
* "dec"
* ]}
* />
*/
months?: string[] | Array<string[]>;
/**
* @example
* <Calendar
* onChange={dateObject=>{
* console.log(dateObject.format())
* }}
* />
*
* <DatePicker
* onChange={dateObject=>{
* console.log(JSON.stringify(dateObject))
* }}
* />
*/
onChange?(selectedDates: ChangedValue<Multiple, Range>): void | false;
showOtherDays?: boolean;
/**
* the date you set in datepicker as value must be equal or bigger than min date.
*
* otherwise datepicker recognise it as `invalid date` and doesn't format it.
*
* @example
* <DatePicker
* value="2020/12/05"
* minDate="2020/12/05"
* />
*/
minDate?: Date | string | number | DateObject;
/**
* the date you set in datepicker as value must be equal or smaller than max date.
*
* otherwise datepicker recognise it as `invalid date` and doesn't format it.
*
* @example
* <DatePicker
* value="2020/12/01"
* maxDate="2020/12/06"
* />
*/
maxDate?: Date | string | number | DateObject;
/**
* You can customize your calendar days
* with the mapDays Prop and create different properties
* for each of them by returning the Props you want.
* @see https://shahabyazdi.github.io/react-multi-date-picker/map-days/
* @example
* <DatePicker
* mapDays={() => {
* return {
* style: {
* backgroundColor: "brown",
* color: "white"
* }
* }
* }}
* />
*/
mapDays?(props: MapDaysProps<Multiple, Range>):
| (HTMLAttributes<HTMLSpanElement> & {
disabled?: boolean;
hidden?: boolean;
})
| void;
disableMonthPicker?: boolean;
disableYearPicker?: boolean;
/**
* @example
* <DatePicker
* format="Date:YYYY/MM/DD, Time:HH:mm:ss"
* formattingIgnoreList={["Date", "Time"]}
* />
*/
formattingIgnoreList?: string[];
/**
* Calendar z-index
* @default 100
*/
zIndex?: number;
/**
* Availble Positions:
* - top
* - bottom
* - left
* - right
*
* @example
*
* <DatePicker
* plugins={[
* <ImportedPlugin position="right" />
* ]}
* />
*/
plugins?: (Plugin | Plugin[])[];
/**
* In Multiple mode, use this Prop to sort the selected dates.
*
* @example
*
* <DatePicker multiple sort />
*/
sort?: boolean;
numberOfMonths?: number;
currentDate?: DateObject;
children?: React.ReactNode;
digits?: string[];
/**
* You can set the buttons prop to false to disable the previous & next buttons.
*
* @example
* <Calendar buttons={false} />
*/
buttons?: boolean;
/**
* You can render your favorite element instead of the previous & next buttons.
*
* @example
* <Calendar renderButton={<CustomButton />} />
*/
renderButton?: React.ReactElement | Function;
/**
* Use this property to change the start day of the week.
*
* Only numbers between 0 and 6 are valid
*
* @example
*
* <Calendar weekStartDayIndex={2} />
*/
weekStartDayIndex?: number;
disableDayPicker?: boolean;
onPropsChange?(props: object): void;
onMonthChange?(date: DateObject): void;
onYearChange?(date: DateObject): void;
onFocusedDateChange?(
focusedDate: DateObject | undefined,
clickedDate: DateObject | undefined
): void;
readOnly?: boolean;
disabled?: boolean;
hideMonth?: boolean;
hideYear?: boolean;
hideWeekDays?: boolean;
shadow?: boolean;
fullYear?: boolean;
displayWeekNumbers?: boolean;
weekNumber?: string;
weekPicker?: boolean;
rangeHover?: boolean;
monthYearSeparator?: string;
formatMonth?: (month: string, year: string) => string;
formatYear?: (year: string, month: string) => string;
highlightToday?: boolean;
headerOrder?: Array<HeaderItem>;
autoFocus?: boolean;
}
export interface DatePickerProps<
Multiple extends boolean = false,
Range extends boolean = false
> {
arrow?: boolean | React.ReactElement;
arrowClassName?: string;
arrowStyle?: React.CSSProperties;
/**
* Input name.
* This feature does not work if you render custom input.
*/
name?: string;
id?: string;
title?: string;
required?: boolean;
/**
* Input placeholder.
* This feature does not work if you render custom input.
*/
placeholder?: string;
/**
* Input style.
* This feature does not work if you render custom input.
*/
style?: React.CSSProperties;
/**
* This feature does not work if you render custom input.
*
* You can also use this prop for button and icon type.
*
* Default class names:
*
* - input : `rmdp-input`
*
* - button : `rmdp-button`
*
* Note that when you enter a new className, the default className is automatically `removed`.
*/
inputClass?: string;
/**
* This feature does not work if you render custom input.
*/
disabled?: boolean;
/**
* @example
* <DatePicker
* render={<CustomComponent/>}
* />
*/
render?:
| React.ReactElement<CustomComponentProps>
| ((
value: string,
openCalendar: () => void,
handleValueChange: (e: React.ChangeEvent) => void,
locale: Locale,
separator: string
) => React.ReactNode);
/**
* This feature only affects on `input` in `single` mode
*
* Input modes:
*
* - text
* - numeric
* - decimal
* - none `useful for disabling virtual keyboard`
*
* @default "text"
*/
inputMode?: string;
scrollSensitive?: boolean;
hideOnScroll?: boolean;
/**
* DatePicker container style.
*/
containerStyle?: React.CSSProperties;
/**
* DatePicker container className.
*/
containerClassName?: string;
/**
* Availble positions:
*
* - top or top-center
* - bottom or bottom-center
* - left or left-center
* - right or right-center
* - top-start or top-left
* - bottom-start or bottom-left
* - left-start or left-top
* - right-start or right-top
* - top-end or top-right
* - bottom-end or bottom-right
* - left-end or left-bottom
* - right-end or right-bottom
*
* @see https://shahabyazdi.github.io/react-multi-date-picker/positions/
* @example
*
* <DatePicker
* calendarPosition="bottom-start"
* />
*/
calendarPosition?: string;
animations?: Function[];
/**
* This feature only affects on `input` in `single` mode
*/
editable?: boolean;
/**
* Set it to false if you want to see selected date(s)
* that are not in range of min and max dates in calendar.
* @default true
*/
onlyShowInRangeDates?: boolean;
/**
* Return `false` in case you don't want to open Calendar
*/
onOpen?(): void | boolean;
/**
* Return `false` in case you don't want to close Calendar
*/
onClose?(): void | boolean;
fixMainPosition?: boolean;
fixRelativePosition?: boolean;
offsetY?: number;
offsetX?: number;
onPositionChange?(data: {
popper: {
top: number;
bottom: number;
left: number;
right: number;
height: number;
width: number;
};
element: {
top: number;
bottom: number;
left: number;
right: number;
height: number;
width: number;
};
arrow: {
top: number;
bottom: number;
left: number;
right: number;
height: number;
width: number;
direction: string;
};
position: string;
scroll: {
scrollLeft: number;
scrollTop: number;
};
}): void;
mobileLabels?: { OK: string; CANCEL: string };
portal?: boolean;
portalTarget?: HTMLElement;
onOpenPickNewDate?: boolean;
mobileButtons?: Array<
HTMLAttributes<HTMLButtonElement> & { label: string }
>;
onChange?(
date: ChangedValue<Multiple, Range>,
options: {
validatedValue: string | Array<string>;
input: HTMLElement;
isTyping: boolean;
}
): void | false;
dateSeparator?: string;
multipleRangeSeparator?: string;
type?: string;
typingTimeout?: number;
}
export { DateObject };
export function Calendar<
Multiple extends boolean = false,
Range extends boolean = false
>(props: CalendarProps<Multiple, Range>): React.ReactElement;
export function getAllDatesInRange(
range: DateObject[],
toDate?: boolean
): DateObject[] | Date[];
export function toDateObject(
date: Date,
calendar?: Calendar,
format?: string
): DateObject;
export default function DatePicker<
Multiple extends boolean = false,
Range extends boolean = false
>(
props: Omit<CalendarProps<Multiple, Range>, "onChange"> &
DatePickerProps<Multiple, Range>
): React.ReactElement;
type SetDateProps = {
date?: DateObject;
year?: number;
month?: number;
months?: Array<string[]>;
weekDays?: Array<string[]>;
day?: number;
hour?: number;
minute?: number;
second?: number;
millisecond?: number;
calendar?: Calendar;
locale?: Locale;
format?: string;
ignoreList?: string[];
digits?: string[];
};
function set<K extends keyof SetDateProps = keyof SetDateProps>(
key: K,
value: SetDateProps[K]
): void;
export type CalendarRef = HTMLDivElement & { set: typeof set };
export type DatePickerRef = HTMLDivElement & {
openCalendar: () => void;
closeCalendar: () => void;
refreshPosition: () => void;
isOpen: boolean;
};
}
declare module "react-multi-date-picker/plugins/date_panel" {
import React, { HTMLAttributes } from "react";
import DateObject from "react-date-object";
interface DatePanelProps
extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
position?: string;
disabled?: boolean;
eachDaysInRange?: boolean;
sort?: string;
style?: React.CSSProperties;
className?: string;
onClickDate?(date: DateObject | undefined): void;
removeButton?: boolean;
header?: string;
markFocused?: boolean;
focusedClassName?: string;
formatFunction?(object: {
date: DateObject | undefined;
format: string;
index: number;
}): React.ReactNode;
}
export default function DatePanel(props: DatePanelProps): React.ReactElement;
}
declare module "react-multi-date-picker/plugins/date_picker_header" {
import React, { HTMLAttributes } from "react";
import type { Calendar, Locale } from "react-date-object";
interface DatePickerHeaderProps
extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
position?: string;
disabled?: boolean;
size?: string;
calendar?: Calendar;
locale?: Locale;
className?: string;
}
export default function DatePickerHeader(
props: DatePickerHeaderProps
): React.ReactElement;
}
declare module "react-multi-date-picker/plugins/colors" {
import { HTMLAttributes } from "react";
import type { Plugin } from "react-multi-date-picker";
interface ColorsProps
extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
position?: string;
disabled?: boolean;
colors?: string[];
defaultColor?: string;
className?: string;
}
export default function colors(object?: ColorsProps): Plugin[];
}
declare module "react-multi-date-picker/plugins/settings" {
import React, { HTMLAttributes } from "react";
interface SettingsProps
extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
position?: string;
disabled?: boolean;
calendars?: string[];
locales?: string[];
modes?: string[];
others?: string[];
defaultActive?: string;
disabledList?: string[];
defaultFormat?: {
single?: string;
onlyYearPicker?: string;
onlyMonthPicker?: string;
};
className?: string;
names?: {
gregorian: string;
persian: string;
arabic: string;
indian: string;
en: string;
fa: string;
ar: string;
hi: string;
single: string;
multiple: string;
range: string;
disable: string;
onlyMonthPicker: string;
onlyYearPicker: string;
};
titles?: {
calendar: string;
locale: string;
mode: string;
otherPickers: string;
gregorian: string;
persian: string;
arabic: string;
indian: string;
en: string;
fa: string;
ar: string;
hi: string;
single: string;
multiple: string;
range: string;
disable: string;
onlyMonthPicker: string;
onlyYearPicker: string;
};
}
export default function Settings(props: SettingsProps): React.ReactElement;
}
declare module "react-multi-date-picker/plugins/toolbar" {
import React, { HTMLAttributes } from "react";
interface ToolbarProps
extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
position?: string;
disabled?: boolean;
className?: string;
sort?: string[];
names?: { today: string; deselect: string; close: string };
}
export default function Toolbar(props: ToolbarProps): React.ReactElement;
}
declare module "react-multi-date-picker/plugins/highlight_weekends" {
export default function highlightWeekends(weekends?: number[]): {
type: string;
fn: Function;
};
}
declare module "react-multi-date-picker/plugins/time_picker" {
import React, { HTMLAttributes } from "react";
interface TimePickerProps
extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
position?: string;
disabled?: boolean;
hideSeconds?: boolean;
/**
* If the calendar is in multiple or range mode,
* and the time picker position is right or left,
* a select with the default format (YYYY/MM/DD)
* will be added to the time picker.
* So, you can change the format of the select with this prop.
*/
format?: string;
header?: boolean;
hStep?: number;
mStep?: number;
sStep?: number;
}
export default function TimePicker(
props: TimePickerProps
): React.ReactElement;
}
declare module "react-multi-date-picker/plugins/analog_time_picker" {
import React from "react";
interface TimePickerProps {
position?: string;
disabled?: boolean;
hideSeconds?: boolean;
/**
* If the calendar is in multiple or range mode,
* and the time picker position is right or left,
* a select with the default format (YYYY/MM/DD)
* will be added to the time picker.
* So, you can change the format of the select with this prop.
*/
format?: string;
hStep?: number;
mStep?: number;
sStep?: number;
}
export default function AnalogTimePicker(
props: TimePickerProps
): React.ReactElement;
}
declare module "react-multi-date-picker/plugins/range_picker_footer" {
import React from "react";
interface FooterProps {
position?: string;
disabled?: boolean;
format?: string;
names?: {
selectedDates: string;
from: string;
to: string;
selectDate: string;
close: string;
separator: string;
};
}
export default function Footer(props: FooterProps): React.ReactElement;
}
declare module "react-multi-date-picker/components/button" {
import React, { HTMLAttributes } from "react";
export default function Buttons(
props: HTMLAttributes<HTMLButtonElement>
): React.ReactElement;
}
declare module "react-multi-date-picker/components/input_icon" {
import React, { HTMLAttributes } from "react";
export default function InputIcon(
props: HTMLAttributes<HTMLInputElement>
): React.ReactElement;
}
declare module "react-multi-date-picker/components/icon" {
import React, { SVGAttributes } from "react";
export default function Icon(
props: SVGAttributes<SVGElement>
): React.ReactElement;
}