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; }