You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

712 lines
18 KiB

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<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?: 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"
* <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?: boolean;
/**
* @example
* <Calendar
* value={[new Date(2020,10,10), new Date(2020,10,14)]}
* multiple
* />
*
* <DatePicker multiple />
*/
multiple?: boolean;
/**
* 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: 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
* <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?(object: {
date: DateObject;
selectedDate: DateObject | DateObject[];
currentMonth: object;
isSameDate(arg1: DateObject, arg2: DateObject): boolean;
}):
| (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;
}
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
* <DatePicker
* type="custom"
* render={<CustomComponent/>}
* />
*/
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
*
* <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;
}
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<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;
}
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<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;
}