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 | Date[] | string[] | number[] | DateObject[] | null; export type FunctionalPlugin = { type: string; fn: Function }; export type Plugin = React.ReactElement | FunctionalPlugin; export interface CalendarProps { ref?: React.MutableRefObject; /** * @types Date | string | number | DateObject * @types Date[] | string[] | number[] | DateObject[] * @example * * */ value?: Value; /** * 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" * * * import indian from "react-date-object/calendars/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" * * * import gregorian_ar from "react-date-object/locales/gregorian_ar" * */ locale?: Locale; /** * @type string * @default "YYYY/MM/DD" * @see https://shahabyazdi.github.io/react-multi-date-picker/format-tokens/ * @example * * * */ format?: string; onlyMonthPicker?: boolean; onlyYearPicker?: boolean; /** * @example * * * */ range?: boolean; /** * @example * * * */ multiple?: boolean; /** * Calendar wrapper className */ className?: string; /** * @see https://shahabyazdi.github.io/react-multi-date-picker/locales/ * @example * */ weekDays?: string[] | Array; /** * @see https://shahabyazdi.github.io/react-multi-date-picker/locales/ * @example * */ months?: string[] | Array; /** * @example * { * console.log(dateObject.format()) * }} * /> * * { * console.log(JSON.stringify(dateObject)) * }} * /> */ onChange?(selectedDates: DateObject | DateObject[] | null): void; 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 * */ 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 * */ 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 * { * return { * style: { * backgroundColor: "brown", * color: "white" * } * } * }} * /> */ mapDays?(object: { date: DateObject; selectedDate: DateObject | DateObject[]; currentMonth: object; isSameDate(arg1: DateObject, arg2: DateObject): boolean; }): | (HTMLAttributes & { disabled?: boolean; hidden?: boolean; }) | void; disableMonthPicker?: boolean; disableYearPicker?: boolean; /** * @example * */ formattingIgnoreList?: string[]; /** * Calendar z-index * @default 100 */ zIndex?: number; /** * Availble Positions: * - top * - bottom * - left * - right * * @example * * * ]} * /> */ plugins?: (Plugin | Plugin[])[]; /** * In Multiple mode, use this Prop to sort the selected dates. * * @example * * */ 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 * */ buttons?: boolean; /** * You can render your favorite element instead of the previous & next buttons. * * @example * } /> */ renderButton?: React.ReactElement | Function; /** * Use this property to change the start day of the week. * * Only numbers between 0 and 6 are valid * * @example * * */ 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; } export interface DatePickerProps { 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 * } * /> */ render?: React.ReactElement | Function; /** * 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 * * */ 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; } export { DateObject }; export function Calendar(props: CalendarProps): React.ReactElement; export function getAllDatesInRange( range: DateObject[], toDate?: boolean ): DateObject[] | Date[]; export function toDateObject(date: Date, calendar?: Calendar): DateObject; export default function DatePicker( props: CalendarProps & DatePickerProps ): React.ReactElement; } declare module "react-multi-date-picker/plugins/date_panel" { import React, { HTMLAttributes } from "react"; import DateObject from "react-date-object"; interface DatePanelProps extends Omit, "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, "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, "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, "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, "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, "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; } 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; } 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 ): React.ReactElement; } declare module "react-multi-date-picker/components/input_icon" { import React, { HTMLAttributes } from "react"; export default function InputIcon( props: HTMLAttributes ): React.ReactElement; } declare module "react-multi-date-picker/components/icon" { import React, { SVGAttributes } from "react"; export default function Icon( props: SVGAttributes ): React.ReactElement; }