Socket
Socket
Sign inDemoInstall

@types/react-dates

Package Overview
Dependencies
Maintainers
1
Versions
43
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@types/react-dates - npm Package Compare versions

Comparing version 17.1.15 to 21.8.0

1337

react-dates/index.d.ts

@@ -1,2 +0,2 @@

// Type definitions for react-dates v17.1.0
// Type definitions for react-dates 21.8
// Project: https://github.com/airbnb/react-dates

@@ -6,2 +6,3 @@ // Definitions by: Artur Ampilogov <https://github.com/ArturAmpilogov>

// Chris Griebel <https://github.com/cgriebel>
// Jason Unger <https://github.com/jsonunger>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped

@@ -13,542 +14,936 @@ // TypeScript Version: 2.8

import * as moment from 'moment';
import { Props as ReactOutsideClickHandlerProps } from 'react-outside-click-handler';
export = ReactDates;
// UTILITY TYPES
export type RenderMonthProps =
| {
renderMonthText?: ((month: moment.Moment) => React.ReactNode) | null;
renderMonthElement?: never;
}
| {
renderMonthText?: never;
renderMonthElement?:
| ((props: {
month: moment.Moment;
onMonthSelect: (currentMonth: moment.Moment, newMonthVal: string) => void;
onYearSelect: (currentMonth: moment.Moment, newMonthVal: string) => void;
isVisible: boolean;
}) => React.ReactNode)
| null;
};
declare namespace momentPropTypes {
type momentObj = moment.Moment;
type momentString = any;
type momentDurationObj = any;
}
// SHAPES
//
// shapes/AnchorDirectionShape.js
export type AnchorDirectionShape = 'left' | 'right';
declare namespace ReactDates {
// SHAPES
//
// shapes/AnchorDirectionShape.js
type AnchorDirectionShape = 'left' | 'right';
// shapes/CalendarInfoPositionShape.js
export type CalendarInfoPositionShape = 'top' | 'bottom' | 'before' | 'after';
// shapes/CalendarInfoPositionShape.js
type CalendarInfoPositionShape = 'top' | 'bottom' | 'before' | 'after';
// shapes/NavPositionShape.js
export type NavPositionShape = 'navPositionTop' | 'navPositionBottom';
// shapes/NavPositionShape.js
type NavPositionShape = 'navPositionTop' | 'navPositionBottom';
// shapes/DateRangePickerShape.js
export type DateRangePickerShape = RenderMonthProps & {
// required props for a functional interactive DateRangePicker
startDate: moment.Moment | null;
startDateId: string;
endDate: moment.Moment | null;
endDateId: string;
focusedInput: FocusedInputShape | null;
// shapes/DateRangePickerShape.js
interface DateRangePickerShape {
// required props for a functional interactive DateRangePicker
startDate: momentPropTypes.momentObj | null;
startDateId: string;
endDate: momentPropTypes.momentObj | null;
endDateId: string;
focusedInput: FocusedInputShape | null;
onDatesChange: (arg: { startDate: moment.Moment | null; endDate: moment.Moment | null }) => void;
onFocusChange: (arg: FocusedInputShape | null) => void;
onDatesChange: (
arg: {
startDate: momentPropTypes.momentObj | null;
endDate: momentPropTypes.momentObj | null;
}
) => void;
onFocusChange: (arg: FocusedInputShape | null) => void;
onClose?: (final: { startDate: moment.Moment | null; endDate: moment.Moment | null }) => void;
onClose?: (
final: {
startDate: momentPropTypes.momentObj;
endDate: momentPropTypes.momentObj;
}
) => void;
// input related props
startDatePlaceholderText?: string;
startDateOffset?: (day: moment.Moment) => moment.Moment;
endDateOffset?: (day: moment.Moment) => moment.Moment;
// input related props
startDatePlaceholderText?: string;
endDatePlaceholderText?: string;
disabled?: DisabledShape;
required?: boolean;
readOnly?: boolean;
screenReaderInputMessage?: string;
showClearDates?: boolean;
showDefaultInputIcon?: boolean;
inputIconPosition?: IconPositionShape;
customInputIcon?: string | JSX.Element;
customArrowIcon?: string | JSX.Element;
customCloseIcon?: string | JSX.Element;
noBorder?: boolean;
block?: boolean;
small?: boolean;
regular?: boolean;
keepFocusOnInput?: boolean;
// calendar presentation and interaction related props
renderMonthText?: (day: momentPropTypes.momentObj) => string | JSX.Element;
renderMonthElement?: (
props: {
month: momentPropTypes.momentObj;
onMonthSelect: (currentMonth: momentPropTypes.momentObj, newMonthVal: string) => void;
onYearSelect: (currentMonth: momentPropTypes.momentObj, newYearVal: string) => void;
isVisible: boolean;
}
) => string | JSX.Element;
orientation?: OrientationShape;
anchorDirection?: AnchorDirectionShape;
openDirection?: OpenDirectionShape;
horizontalMargin?: number;
withPortal?: boolean;
withFullScreenPortal?: boolean;
appendToBody?: boolean;
disableScroll?: boolean;
daySize?: number;
isRTL?: boolean;
firstDayOfWeek?: DayOfWeekShape;
initialVisibleMonth?: () => momentPropTypes.momentObj;
numberOfMonths?: number;
keepOpenOnDateSelect?: boolean;
reopenPickerOnClearDates?: boolean;
renderCalendarInfo?: () => string | JSX.Element;
calendarInfoPosition?: CalendarInfoPositionShape;
hideKeyboardShortcutsPanel?: boolean;
verticalHeight?: number;
transitionDuration?: number;
horizontalMonthPadding?: number;
verticalSpacing?: number;
endDatePlaceholderText?: string;
startDateAriaLabel?: string;
endDateAriaLabel?: string;
disabled?: DisabledShape;
required?: boolean;
readOnly?: boolean;
screenReaderInputMessage?: string;
showClearDates?: boolean;
showDefaultInputIcon?: boolean;
inputIconPosition?: IconPositionShape;
customInputIcon?: React.ReactNode;
customArrowIcon?: React.ReactNode;
customCloseIcon?: React.ReactNode;
noBorder?: boolean;
block?: boolean;
small?: boolean;
regular?: boolean;
keepFocusOnInput?: boolean;
// calendar presentation and interaction related props
renderWeekHeaderElement?: ((day: string) => React.ReactNode) | null;
orientation?: OrientationShape;
anchorDirection?: AnchorDirectionShape;
openDirection?: OpenDirectionShape;
horizontalMargin?: number;
withPortal?: boolean;
withFullScreenPortal?: boolean;
appendToBody?: boolean;
disableScroll?: boolean;
daySize?: number;
isRTL?: boolean;
firstDayOfWeek?: DayOfWeekShape | null;
initialVisibleMonth?: (() => moment.Moment) | null;
numberOfMonths?: number;
keepOpenOnDateSelect?: boolean;
reopenPickerOnClearDates?: boolean;
renderCalendarInfo?: (() => React.ReactNode) | null;
calendarInfoPosition?: CalendarInfoPositionShape;
hideKeyboardShortcutsPanel?: boolean;
verticalHeight?: number | null;
transitionDuration?: number;
horizontalMonthPadding?: number;
verticalSpacing?: number;
// navigation related props
dayPickerNavigationInlineStyles?: Record<string, any>;
navPosition?: NavPositionShape;
navPrev?: string | JSX.Element;
navNext?: string | JSX.Element;
onPrevMonthClick?: (newCurrentMonth: momentPropTypes.momentObj) => void;
onNextMonthClick?: (newCurrentMonth: momentPropTypes.momentObj) => void;
// navigation related props
dayPickerNavigationInlineStyles?: Record<string, any> | null;
navPosition?: NavPositionShape;
navPrev?: React.ReactNode;
navNext?: React.ReactNode;
renderNavPrevButton?:
| ((props: {
ariaLabel: string;
disabled: boolean;
onClick?: React.MouseEventHandler;
onKeyUp?: React.KeyboardEventHandler;
onMouseUp?: React.MouseEventHandler;
}) => React.ReactNode)
| null;
renderNavNextButton?:
| ((props: {
ariaLabel: string;
disabled: boolean;
onClick?: React.MouseEventHandler;
onKeyUp?: React.KeyboardEventHandler;
onMouseUp?: React.MouseEventHandler;
}) => React.ReactNode)
| null;
onPrevMonthClick?: (newCurrentMonth: moment.Moment) => void;
onNextMonthClick?: (newCurrentMonth: moment.Moment) => void;
// day presentation and interaction related props
renderCalendarDay?: (props: CalendarDayShape) => JSX.Element;
renderDayContents?: (day: momentPropTypes.momentObj) => string | JSX.Element;
minimumNights?: number;
minDate?: momentPropTypes.momentObj;
maxDate?: momentPropTypes.momentObj;
enableOutsideDays?: boolean;
isDayBlocked?: (day: any) => boolean;
isOutsideRange?: (day: any) => boolean;
isDayHighlighted?: (day: any) => boolean;
// day presentation and interaction related props
renderCalendarDay?: (props: CalendarDayShape) => React.ReactNode;
renderDayContents?: ((day: moment.Moment, modifiers: ModifiersShape) => React.ReactNode) | null;
minimumNights?: number;
minDate?: moment.Moment;
maxDate?: moment.Moment;
enableOutsideDays?: boolean;
isDayBlocked?: (day: moment.Moment) => boolean;
isOutsideRange?: (day: moment.Moment) => boolean;
isDayHighlighted?: (day: moment.Moment) => boolean;
// internationalization props
displayFormat?: string | (() => string);
monthFormat?: string;
weekDayFormat?: string;
phrases?: DateRangePickerPhrases;
dayAriaLabelFormat?: string;
}
// internationalization props
displayFormat?: string | (() => string);
monthFormat?: string;
weekDayFormat?: string;
phrases?: DateRangePickerPhrases;
dayAriaLabelFormat?: string;
};
export const DateRangePickerShape: DateRangePickerShape;
// shapes/DayOfWeekShape.js
type DayOfWeekShape = 0 | 1 | 2 | 3 | 4 | 5 | 6;
// shapes/DayOfWeekShape.js
export type DayOfWeekShape = 0 | 1 | 2 | 3 | 4 | 5 | 6;
// shapes/DisabledShape.js
type DisabledShape = boolean | 'startDate' | 'endDate';
// shapes/DisabledShape.js
export type DisabledShape = boolean | 'startDate' | 'endDate';
// shapes/FocusedInputShape.js
type FocusedInputShape = 'startDate' | 'endDate';
// shapes/FocusedInputShape.js
export type FocusedInputShape = 'startDate' | 'endDate';
// shape/IconPositionShape.js
type IconPositionShape = 'before' | 'after';
// shapes/IconPositionShape.js
export type IconPositionShape = 'before' | 'after';
// shape/ModifiersShape.js
type ModifiersShape = Set<string>;
// shapes/ModifiersShape.js
export type ModifiersShape = Set<string>;
// shape/OpenDirectionShape.js
type OpenDirectionShape = 'down' | 'up';
// shapes/OpenDirectionShape.js
export type OpenDirectionShape = 'down' | 'up';
// shape/OrientationShape.js
type OrientationShape = 'horizontal' | 'vertical';
// shapes/OrientationShape.js
export type OrientationShape = 'horizontal' | 'vertical';
// shape/ScrollableOrientationShape.js
type ScrollableOrientationShape = 'horizontal' | 'vertical' | 'verticalScrollable';
// shapes/ScrollableOrientationShape.js
export type ScrollableOrientationShape = 'horizontal' | 'vertical' | 'verticalScrollable';
// shapes/SingleDatePickerShape.js
interface SingleDatePickerShape {
id: string;
// shapes/SingleDatePickerShape.js
export type SingleDatePickerShape = RenderMonthProps & {
id: string;
// required props for a functional interactive SingleDatePicker
date: momentPropTypes.momentObj | null;
focused: boolean | null;
// required props for a functional interactive SingleDatePicker
date: moment.Moment | null;
focused: boolean;
onDateChange: (date: momentPropTypes.momentObj | null) => void;
onFocusChange: (arg: { focused: boolean | null }) => void;
onDateChange: (date: moment.Moment | null) => void;
onFocusChange: (arg: { focused: boolean }) => void;
// input related props
placeholder?: string;
disabled?: boolean;
required?: boolean;
readOnly?: boolean;
screenReaderInputMessage?: string;
showClearDate?: boolean;
customCloseIcon?: string | JSX.Element;
showDefaultInputIcon?: boolean;
inputIconPosition?: IconPositionShape;
customInputIcon?: string | JSX.Element;
noBorder?: boolean;
block?: boolean;
small?: boolean;
regular?: boolean;
verticalSpacing?: number;
keepFocusOnInput?: boolean;
// input related props
placeholder?: string;
ariaLabel?: string;
disabled?: boolean;
required?: boolean;
readOnly?: boolean;
screenReaderInputMessage?: string;
showClearDate?: boolean;
customCloseIcon?: React.ReactNode;
showDefaultInputIcon?: boolean;
inputIconPosition?: IconPositionShape;
customInputIcon?: React.ReactNode;
noBorder?: boolean;
block?: boolean;
small?: boolean;
regular?: boolean;
verticalSpacing?: number;
keepFocusOnInput?: boolean;
// calendar presentation and interaction related props
renderMonthText?: (day: momentPropTypes.momentObj) => string | JSX.Element;
renderMonthElement?: (
props: {
month: momentPropTypes.momentObj;
onMonthSelect: (currentMonth: momentPropTypes.momentObj, newMonthVal: string) => void;
onYearSelect: (currentMonth: momentPropTypes.momentObj, newYearVal: string) => void;
isVisible: boolean;
}
) => string | JSX.Element;
orientation?: OrientationShape;
anchorDirection?: AnchorDirectionShape;
openDirection?: OpenDirectionShape;
horizontalMargin?: number;
withPortal?: boolean;
withFullScreenPortal?: boolean;
appendToBody?: boolean;
disableScroll?: boolean;
initialVisibleMonth?: () => momentPropTypes.momentObj;
firstDayOfWeek?: DayOfWeekShape;
numberOfMonths?: number;
keepOpenOnDateSelect?: boolean;
reopenPickerOnClearDate?: boolean;
renderCalendarInfo?: () => string | JSX.Element;
calendarInfoPosition?: CalendarInfoPositionShape;
hideKeyboardShortcutsPanel?: boolean;
daySize?: number;
isRTL?: boolean;
verticalHeight?: number | null;
transitionDuration?: number;
horizontalMonthPadding?: number;
// calendar presentation and interaction related props
renderWeekHeaderElement?: ((day: string) => React.ReactNode) | null;
orientation?: OrientationShape;
anchorDirection?: AnchorDirectionShape;
openDirection?: OpenDirectionShape;
horizontalMargin?: number;
withPortal?: boolean;
withFullScreenPortal?: boolean;
appendToBody?: boolean;
disableScroll?: boolean;
initialVisibleMonth?: (() => moment.Moment) | null;
firstDayOfWeek?: DayOfWeekShape | null;
numberOfMonths?: number;
keepOpenOnDateSelect?: boolean;
reopenPickerOnClearDate?: boolean;
renderCalendarInfo?: (() => React.ReactNode) | null;
calendarInfoPosition?: CalendarInfoPositionShape;
hideKeyboardShortcutsPanel?: boolean;
daySize?: number;
isRTL?: boolean;
verticalHeight?: number;
transitionDuration?: number;
horizontalMonthPadding?: number;
// navigation related props
dayPickerNavigationInlineStyles?: Record<string, any>;
navPosition?: NavPositionShape;
navPrev?: string | JSX.Element;
navNext?: string | JSX.Element;
onPrevMonthClick?: (newCurrentMonth: momentPropTypes.momentObj) => void;
onNextMonthClick?: (newCurrentMonth: momentPropTypes.momentObj) => void;
onClose?: (
final: {
date: momentPropTypes.momentObj;
}
) => void;
// navigation related props
dayPickerNavigationInlineStyles?: Record<string, any> | null;
navPosition?: NavPositionShape;
navPrev?: React.ReactNode;
navNext?: React.ReactNode;
renderNavPrevButton?:
| ((props: {
ariaLabel: string;
disabled: boolean;
onClick?: React.MouseEventHandler;
onKeyUp?: React.KeyboardEventHandler;
onMouseUp?: React.MouseEventHandler;
}) => React.ReactNode)
| null;
renderNavNextButton?:
| ((props: {
ariaLabel: string;
disabled: boolean;
onClick?: React.MouseEventHandler;
onKeyUp?: React.KeyboardEventHandler;
onMouseUp?: React.MouseEventHandler;
}) => React.ReactNode)
| null;
onPrevMonthClick?: (newCurrentMonth: moment.Moment) => void;
onNextMonthClick?: (newCurrentMonth: moment.Moment) => void;
onClose?: (arg: { date: moment.Moment | null }) => void;
// day presentation and interaction related props
renderCalendarDay?: (props: CalendarDayShape) => JSX.Element;
renderDayContents?: (day: momentPropTypes.momentObj) => string | JSX.Element;
// day presentation and interaction related props
renderCalendarDay?: (props: CalendarDayShape) => React.ReactNode;
renderDayContents?: ((day: moment.Moment, modifiers: ModifiersShape) => React.ReactNode) | null;
enableOutsideDays?: boolean;
isDayBlocked?: (day: moment.Moment) => boolean;
isOutsideRange?: (day: moment.Moment) => boolean;
isDayHighlighted?: (day: moment.Moment) => boolean;
// internationalization props
displayFormat?: string | (() => string);
monthFormat?: string;
weekDayFormat?: string;
phrases?: SingleDatePickerPhrases;
dayAriaLabelFormat?: string;
};
export const SingleDatePickerShape: SingleDatePickerShape;
// PHRASES
export interface PhraseArg {
date: string;
}
// defaultPhrases.js
export interface DateRangePickerPhrases {
calendarLabel?: string;
roleDescription?: string;
closeDatePicker?: string;
clearDates?: string;
focusStartDate?: string;
jumpToPrevMonth?: string;
jumpToNextMonth?: string;
keyboardShortcuts?: string;
showKeyboardShortcutsPanel?: string;
hideKeyboardShortcutsPanel?: string;
openThisPanel?: string;
enterKey?: string;
leftArrowRightArrow?: string;
upArrowDownArrow?: string;
pageUpPageDown?: string;
homeEnd?: string;
escape?: string;
questionMark?: string;
selectFocusedDate?: string;
moveFocusByOneDay?: string;
moveFocusByOneWeek?: string;
moveFocusByOneMonth?: string;
moveFocustoStartAndEndOfWeek?: string;
returnFocusToInput?: string;
keyboardForwardNavigationInstructions?: string;
keyboardBackwardNavigationInstructions?: string;
chooseAvailableStartDate?: (phraseArg: PhraseArg) => string;
chooseAvailableEndDate?: (phraseArg: PhraseArg) => string;
dateIsUnavailable?: (phraseArg: PhraseArg) => string;
dateIsSelected?: (phraseArg: PhraseArg) => string;
dateIsSelectedAsStartDate?: (phraseArg: PhraseArg) => string;
dateIsSelectedAsEndDate?: (phraseArg: PhraseArg) => string;
}
// defaultPhrases.js
export interface DateRangePickerInputPhrases {
focusStartDate?: string;
clearDates?: string;
keyboardForwardNavigationInstructions?: string;
keyboardBackwardNavigationInstructions?: string;
}
// defaultPhrases.js
export interface SingleDatePickerPhrases {
calendarLabel?: string;
roleDescription?: string;
closeDatePicker?: string;
clearDate?: string;
jumpToPrevMonth?: string;
jumpToNextMonth?: string;
keyboardShortcuts?: string;
showKeyboardShortcutsPanel?: string;
hideKeyboardShortcutsPanel?: string;
openThisPanel?: string;
enterKey?: string;
leftArrowRightArrow?: string;
upArrowDownArrow?: string;
pageUpPageDown?: string;
homeEnd?: string;
escape?: string;
questionMark?: string;
selectFocusedDate?: string;
moveFocusByOneDay?: string;
moveFocusByOneWeek?: string;
moveFocusByOneMonth?: string;
moveFocustoStartAndEndOfWeek?: string;
returnFocusToInput?: string;
keyboardForwardNavigationInstructions?: string;
keyboardBackwardNavigationInstructions?: string;
chooseAvailableDate?: (phraseArg: PhraseArg) => string;
dateIsUnavailable?: (phraseArg: PhraseArg) => string;
dateIsSelected?: (phraseArg: PhraseArg) => string;
}
// defaultPhrases.js
export interface SingleDatePickerInputPhrases {
clearDate?: string;
keyboardForwardNavigationInstructions?: string;
keyboardBackwardNavigationInstructions?: string;
}
// defaultPhrases.js
export interface DayPickerPhrases {
calendarLabel?: string;
roleDescription?: string;
jumpToPrevMonth?: string;
jumpToNextMonth?: string;
keyboardShortcuts?: string;
showKeyboardShortcutsPanel?: string;
hideKeyboardShortcutsPanel?: string;
openThisPanel?: string;
enterKey?: string;
leftArrowRightArrow?: string;
upArrowDownArrow?: string;
pageUpPageDown?: string;
homeEnd?: string;
escape?: string;
questionMark?: string;
selectFocusedDate?: string;
moveFocusByOneDay?: string;
moveFocusByOneWeek?: string;
moveFocusByOneMonth?: string;
moveFocustoStartAndEndOfWeek?: string;
returnFocusToInput?: string;
chooseAvailableStartDate?: (phraseArg: PhraseArg) => string;
chooseAvailableEndDate?: (phraseArg: PhraseArg) => string;
chooseAvailableDate?: (phraseArg: PhraseArg) => string;
dateIsUnavailable?: (phraseArg: PhraseArg) => string;
dateIsSelected?: (phraseArg: PhraseArg) => string;
dateIsSelectedAsStartDate?: (phraseArg: PhraseArg) => string;
dateIsSelectedAsEndDate?: (phraseArg: PhraseArg) => string;
}
// defaultPhrases.js
export interface DayPickerKeyboardShortcutsPhrases {
keyboardShortcuts?: string;
showKeyboardShortcutsPanel?: string;
hideKeyboardShortcutsPanel?: string;
openThisPanel?: string;
enterKey?: string;
leftArrowRightArrow?: string;
upArrowDownArrow?: string;
pageUpPageDown?: string;
homeEnd?: string;
escape?: string;
questionMark?: string;
selectFocusedDate?: string;
moveFocusByOneDay?: string;
moveFocusByOneWeek?: string;
moveFocusByOneMonth?: string;
moveFocustoStartAndEndOfWeek?: string;
returnFocusToInput?: string;
}
// defaultPhrases.js
export interface DayPickerNavigationPhrases {
jumpToPrevMonth?: string;
jumpToNextMonth?: string;
}
// defaultPhrases.js
export interface CalendarDayPhrases {
chooseAvailableDate?: (phraseArg: PhraseArg) => string;
dateIsUnavailable?: (phraseArg: PhraseArg) => string;
dateIsSelected?: (phraseArg: PhraseArg) => string;
dateIsSelectedAsStartDate?: (phraseArg: PhraseArg) => string;
dateIsSelectedAsEndDate?: (phraseArg: PhraseArg) => string;
}
// COMPONENTS
//
// components/CalendarDay.jsx
export interface CalendarDayShape {
day?: moment.Moment | null;
daySize?: number;
isOutsideDay?: boolean;
modifiers?: ModifiersShape;
isFocused?: boolean;
tabIndex?: 0 | -1;
onDayClick?: (day: moment.Moment, event: React.MouseEvent<HTMLTableDataCellElement>) => void;
onDayMouseEnter?: (day: moment.Moment, event: React.MouseEvent<HTMLTableDataCellElement>) => void;
onDayMouseLeave?: (day: moment.Moment, event: React.MouseEvent<HTMLTableDataCellElement>) => void;
renderDayContents?: ((day: moment.Moment, modifiers: ModifiersShape) => React.ReactNode) | null;
ariaLabelFormat?: string;
// internationalization
phrases?: CalendarDayPhrases;
}
export type CalendarDay = React.ComponentClass<CalendarDayShape>;
export const CalendarDay: React.ComponentClass<CalendarDayShape>;
// components/CalendarMonth.jsx
export type CalendarMonthShape = RenderMonthProps &
Pick<
CalendarDayShape,
'daySize' | 'onDayClick' | 'onDayMouseEnter' | 'onDayMouseLeave' | 'renderDayContents' | 'isFocused' | 'phrases'
> & {
month?: moment.Moment;
horizontalMonthPadding?: number;
isVisible?: boolean;
enableOutsideDays?: boolean;
isDayBlocked?: (day: any) => boolean;
isOutsideRange?: (day: any) => boolean;
isDayHighlighted?: (day: any) => boolean;
modifiers?: Record<string, ModifiersShape>;
orientation?: ScrollableOrientationShape;
onMonthSelect?: (currentMonth: moment.Moment, newMonthVal: string) => void;
onYearSelect?: (currentMonth: moment.Moment, newMonthVal: string) => void;
renderCalendarDay?: (props: CalendarDayShape) => React.ReactNode;
firstDayOfWeek?: DayOfWeekShape | null;
setMonthTitleHeight?: ((captionHeight: number) => void) | null;
verticalBorderSpacing?: number;
// internationalization props
displayFormat?: string | (() => string);
focusedDate?: moment.Moment | null; // indicates focusable day
// i18n
monthFormat?: string;
weekDayFormat?: string;
phrases?: SingleDatePickerPhrases;
dayAriaLabelFormat?: string;
}
};
// PHRASES
type PhraseArg = {
date: string;
}
export type CalendarMonth = React.ComponentClass<CalendarMonthShape>;
export const CalendarMonth: React.ComponentClass<CalendarMonthShape>;
// defaultPhrases.js
type DateRangePickerPhrases = {
calendarLabel?: string;
closeDatePicker?: string;
clearDates?: string;
focusStartDate?: string;
jumpToPrevMonth?: string;
jumpToNextMonth?: string;
keyboardShortcuts?: string;
showKeyboardShortcutsPanel?: string;
hideKeyboardShortcutsPanel?: string;
openThisPanel?: string;
enterKey?: string;
leftArrowRightArrow?: string;
upArrowDownArrow?: string;
pageUpPageDown?: string;
homeEnd?: string;
escape?: string;
questionMark?: string;
selectFocusedDate?: string;
moveFocusByOneDay?: string;
moveFocusByOneWeek?: string;
moveFocusByOneMonth?: string;
moveFocustoStartAndEndOfWeek?: string;
returnFocusToInput?: string;
keyboardNavigationInstructions?: string;
chooseAvailableStartDate?: (phraseArg: PhraseArg) => string;
chooseAvailableEndDate?: (phraseArg: PhraseArg) => string;
dateIsUnavailable?: (phraseArg: PhraseArg) => string;
dateIsSelected?: (phraseArg: PhraseArg) => string;
dateIsSelectedAsStartDate?: (phraseArg: PhraseArg) => string;
dateIsSelectedAsEndDate?: (phraseArg: PhraseArg) => string;
// components/CalendarMonthGrid.jsx
export type CalendarMonthGridShape = RenderMonthProps &
Pick<
CalendarMonthShape,
| 'enableOutsideDays'
| 'horizontalMonthPadding'
| 'onDayClick'
| 'onDayMouseEnter'
| 'onDayMouseLeave'
| 'renderCalendarDay'
| 'renderDayContents'
| 'daySize'
| 'focusedDate'
| 'isFocused'
| 'firstDayOfWeek'
| 'setMonthTitleHeight'
| 'verticalBorderSpacing'
| 'monthFormat'
| 'phrases'
| 'dayAriaLabelFormat'
> & {
firstVisibleMonthIndex?: number;
initialMonth?: moment.Moment;
isAnimating?: boolean;
numberOfMonths?: number;
modifiers?: Record<string, Record<string, ModifiersShape>>;
orientation?: ScrollableOrientationShape;
onMonthTransitionEnd?: (event?: React.TransitionEvent<HTMLDivElement>) => void;
onMonthChange?: (newMonth: moment.Moment) => void;
onYearChange?: (newMonth: moment.Moment) => void;
translationValue?: number | null;
isRTL?: boolean;
transitionDuration?: number;
};
// defaultPhrases.js
type DateRangePickerInputPhrases = {
focusStartDate?: string;
clearDates?: string;
keyboardNavigationInstructions?: string;
};
export type CalendarMonthGrid = React.ComponentClass<CalendarMonthGridShape>;
export const CalendarMonthGrid: React.ComponentClass<CalendarMonthGridShape>;
// defaultPhrases.js
type SingleDatePickerPhrases = {
calendarLabel?: string;
closeDatePicker?: string;
clearDate?: string;
jumpToPrevMonth?: string;
jumpToNextMonth?: string;
keyboardShortcuts?: string;
showKeyboardShortcutsPanel?: string;
hideKeyboardShortcutsPanel?: string;
openThisPanel?: string;
enterKey?: string;
leftArrowRightArrow?: string;
upArrowDownArrow?: string;
pageUpPageDown?: string;
homeEnd?: string;
escape?: string;
questionMark?: string;
selectFocusedDate?: string;
moveFocusByOneDay?: string;
moveFocusByOneWeek?: string;
moveFocusByOneMonth?: string;
moveFocustoStartAndEndOfWeek?: string;
returnFocusToInput?: string;
keyboardNavigationInstructions?: string;
chooseAvailableDate?: (phraseArg: PhraseArg) => string;
dateIsUnavailable?: (phraseArg: PhraseArg) => string;
dateIsSelected?: (phraseArg: PhraseArg) => string;
};
// components/DateRangePicker.jsx
export type DateRangePicker = React.ComponentClass<DateRangePickerShape>;
export const DateRangePicker: React.ComponentClass<DateRangePickerShape>;
// defaultPhrases.js
type SingleDatePickerInputPhrases = {
clearDate?: string;
keyboardNavigationInstructions?: string;
};
// components/DateRangePickerInput.jsx
export interface DateRangePickerInputShape {
startDateId?: string;
startDatePlaceholderText?: string;
startDateAriaLabel?: string;
screenReaderMessage?: string;
// defaultPhrases.js
type DayPickerPhrases = {
calendarLabel?: string;
jumpToPrevMonth?: string;
jumpToNextMonth?: string;
keyboardShortcuts?: string;
showKeyboardShortcutsPanel?: string;
hideKeyboardShortcutsPanel?: string;
openThisPanel?: string;
enterKey?: string;
leftArrowRightArrow?: string;
upArrowDownArrow?: string;
pageUpPageDown?: string;
homeEnd?: string;
escape?: string;
questionMark?: string;
selectFocusedDate?: string;
moveFocusByOneDay?: string;
moveFocusByOneWeek?: string;
moveFocusByOneMonth?: string;
moveFocustoStartAndEndOfWeek?: string;
returnFocusToInput?: string;
chooseAvailableStartDate?: (phraseArg: PhraseArg) => string;
chooseAvailableEndDate?: (phraseArg: PhraseArg) => string;
chooseAvailableDate?: (phraseArg: PhraseArg) => string;
dateIsUnavailable?: (phraseArg: PhraseArg) => string;
dateIsSelected?: (phraseArg: PhraseArg) => string;
};
endDateId?: string;
endDatePlaceholderText?: string;
endDateAriaLabel?: string;
// defaultPhrases.js
type DayPickerKeyboardShortcutsPhrases = {
keyboardShortcuts?: string;
showKeyboardShortcutsPanel?: string;
hideKeyboardShortcutsPanel?: string;
openThisPanel?: string;
enterKey?: string;
leftArrowRightArrow?: string;
upArrowDownArrow?: string;
pageUpPageDown?: string;
homeEnd?: string;
escape?: string;
questionMark?: string;
selectFocusedDate?: string;
moveFocusByOneDay?: string;
moveFocusByOneWeek?: string;
moveFocusByOneMonth?: string;
moveFocustoStartAndEndOfWeek?: string;
returnFocusToInput?: string;
};
onStartDateFocus?: React.FocusEventHandler<HTMLInputElement>;
onEndDateFocus?: React.FocusEventHandler<HTMLInputElement>;
onStartDateChange?: (dateString: string) => void;
onEndDateChange?: (dateString: string) => void;
onStartDateShiftTab?: React.KeyboardEventHandler<HTMLInputElement>;
onEndDateTab?: React.KeyboardEventHandler<HTMLInputElement>;
onClearDates?: React.MouseEventHandler<HTMLButtonElement>;
onKeyDownArrowDown?: React.KeyboardEventHandler<HTMLInputElement>;
onKeyDownQuestionMark?: React.KeyboardEventHandler<HTMLInputElement>;
// defaultPhrases.js
type DayPickerNavigationPhrases = {
jumpToPrevMonth?: string;
jumpToNextMonth?: string;
};
startDate?: string;
endDate?: string;
// defaultPhrases.js
type CalendarDayPhrases = {
chooseAvailableDate?: (phraseArg: PhraseArg) => string;
dateIsUnavailable?: (phraseArg: PhraseArg) => string;
dateIsSelected?: (phraseArg: PhraseArg) => string;
dateIsSelectedAsStartDate?: (phraseArg: PhraseArg) => string;
dateIsSelectedAsEndDate?: (phraseArg: PhraseArg) => string;
};
isStartDateFocused?: boolean;
isEndDateFocused?: boolean;
showClearDates?: boolean;
disabled?: DisabledShape;
required?: boolean;
readOnly?: boolean;
openDirection?: OpenDirectionShape;
showCaret?: boolean;
showDefaultInputIcon?: boolean;
inputIconPosition?: IconPositionShape;
customInputIcon?: React.ReactNode;
customArrowIcon?: React.ReactNode;
customCloseIcon?: React.ReactNode;
noBorder?: boolean;
block?: boolean;
small?: boolean;
regular?: boolean;
verticalSpacing?: number;
// COMPONENTS
//
// accessibility
isFocused?: boolean; // describes actual DOM focus
// components/CalendarDay.jsx
type DayMouseEventHandler = (day: momentPropTypes.momentObj | null, event: React.MouseEvent) => void;
// i18n
phrases?: DateRangePickerInputPhrases;
interface CalendarDayShape {
day?: momentPropTypes.momentObj | null;
daySize?: number;
isOutsideDay?: boolean;
modifiers?: ModifiersShape;
isFocused?: boolean;
tabIndex?: 0 | -1;
onDayClick?: DayMouseEventHandler;
onDayMouseEnter?: DayMouseEventHandler;
onDayMouseLeave?: DayMouseEventHandler;
renderDayContents?: (day: momentPropTypes.momentObj) => string | JSX.Element;
ariaLabelFormat?: string;
phrases?: CalendarDayPhrases;
}
isRTL?: boolean;
}
type CalendarDay = React.ClassicComponentClass<CalendarDayShape>;
var CalendarDay: React.ClassicComponentClass<CalendarDayShape>;
export type DateRangePickerInput = React.ComponentClass<DateRangePickerInputShape>;
export const DateRangePickerInput: React.ComponentClass<DateRangePickerInputShape>;
// components/DateRangePicker.js
type DateRangePicker = React.ClassicComponentClass<DateRangePickerShape>;
var DateRangePicker: React.ClassicComponentClass<DateRangePickerShape>;
// components/DateRangePickerInputController.jsx
export interface DateRangePickerInputControllerShape
extends Pick<
DateRangePickerInputShape,
| 'startDateId'
| 'startDatePlaceholderText'
| 'isStartDateFocused'
| 'startDateAriaLabel'
| 'endDateId'
| 'endDatePlaceholderText'
| 'isEndDateFocused'
| 'endDateAriaLabel'
| 'screenReaderMessage'
| 'showClearDates'
| 'showCaret'
| 'showDefaultInputIcon'
| 'inputIconPosition'
| 'disabled'
| 'required'
| 'readOnly'
| 'openDirection'
| 'noBorder'
| 'block'
| 'small'
| 'regular'
| 'verticalSpacing'
| 'onKeyDownArrowDown'
| 'onKeyDownQuestionMark'
| 'customInputIcon'
| 'customArrowIcon'
| 'customCloseIcon'
| 'isFocused'
| 'phrases'
| 'isRTL'
> {
startDate?: moment.Moment | null;
// components/DayPickerRangeController.jsx
interface DayPickerRangeControllerShape extends DayPickerShape {
// REQUIRED props
startDate: momentPropTypes.momentObj | null;
endDate: momentPropTypes.momentObj | null;
onDatesChange: (
arg: {
startDate: momentPropTypes.momentObj | null;
endDate: momentPropTypes.momentObj | null;
}
) => void;
focusedInput: FocusedInputShape;
onFocusChange: (arg: FocusedInputShape | null) => void;
endDate?: moment.Moment | null;
startDateOffset?: (day: any) => any;
endDateOffset?: (day: any) => any;
keepOpenOnDateSelect?: boolean;
reopenPickerOnClearDates?: boolean;
withFullScreenPortal?: boolean;
minimumNights?: number;
isOutsideRange?: (day: moment.Moment) => boolean;
displayFormat?: string | (() => string);
onClose?: (
final: {
startDate: momentPropTypes.momentObj;
endDate: momentPropTypes.momentObj;
}
) => void;
onFocusChange?: (arg: FocusedInputShape | null) => void;
onClose?: (final: { startDate: moment.Moment | null; endDate: moment.Moment | null }) => void;
onDatesChange?: (arg: { startDate: moment.Moment | null; endDate: moment.Moment | null }) => void;
}
keepOpenOnDateSelect?: boolean;
minimumNights?: number;
disabled?: DisabledShape;
isOutsideRange?: (day: any) => boolean;
isDayBlocked?: (day: any) => boolean;
isDayHighlighted?: (day: any) => boolean;
}
export type DateRangePickerInputController = React.ComponentClass<DateRangePickerInputControllerShape>;
export const DateRangePickerInputController: React.ComponentClass<DateRangePickerInputControllerShape>;
type DayPickerRangeController = React.ClassicComponentClass<DayPickerRangeControllerShape>;
var DayPickerRangeController: React.ClassicComponentClass<DayPickerRangeControllerShape>;
// components/DayPickerShape.jsx
interface DayPickerShape {
renderMonthText?: (day: momentPropTypes.momentObj) => string | JSX.Element;
renderMonthElement?: (
props: {
month: momentPropTypes.momentObj;
onMonthSelect: (currentMonth: momentPropTypes.momentObj, newMonthVal: string) => void;
onYearSelect: (currentMonth: momentPropTypes.momentObj, newYearVal: string) => void;
isVisible: boolean;
}
) => string | JSX.Element;
enableOutsideDays?: boolean;
// components/DayPicker.jsx
export type DayPickerShape = RenderMonthProps &
Pick<
CalendarMonthGridShape,
| 'enableOutsideDays'
| 'firstDayOfWeek'
| 'daySize'
| 'isRTL'
| 'transitionDuration'
| 'verticalBorderSpacing'
| 'horizontalMonthPadding'
| 'modifiers'
| 'renderCalendarDay'
| 'renderDayContents'
| 'onDayClick'
| 'onDayMouseEnter'
| 'onDayMouseLeave'
| 'monthFormat'
| 'dayAriaLabelFormat'
> &
(
| { orientation?: OrientationShape; onGetNextScrollableMonths?: never; onGetPrevScrollableMonths?: never }
| {
orientation: 'verticalScrollable';
onGetNextScrollableMonths?: (
event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
) => void; // VERTICAL_SCROLLABLE daypickers only
onGetPrevScrollableMonths?: (
event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
) => void; // VERTICAL_SCROLLABLE daypickers only
}
) & {
// calendar presentation props
numberOfMonths?: number;
orientation?: ScrollableOrientationShape;
withPortal?: boolean;
initialVisibleMonth?: () => momentPropTypes.momentObj;
firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
onOutsideClick?: ReactOutsideClickHandlerProps['onOutsideClick'];
hidden?: boolean;
initialVisibleMonth?: () => moment.Moment;
renderCalendarInfo?: (() => React.ReactNode) | null;
calendarInfoPosition?: CalendarInfoPositionShape;
hideKeyboardShortcutsPanel?: boolean;
daySize?: number;
verticalHeight?: number;
verticalHeight?: number | null;
noBorder?: boolean;
transitionDuration?: number;
horizontalMonthPadding?: number;
renderKeyboardShortcutsButton?: (props: {
ref: React.Ref<HTMLElement>;
onClick: React.MouseEventHandler;
ariaLabel: string;
}) => React.ReactNode;
renderKeyboardShortcutsPanel?: (props: {
closeButtonAriaLabel: string;
keyboardShortcuts: Array<Record<'unicode' | 'label' | 'action', string>>;
onCloseButtonClick: React.MouseEventHandler;
onKeyDown: React.KeyboardEventHandler;
title: string;
}) => React.ReactNode;
navPrev?: string | JSX.Element;
navNext?: string | JSX.Element;
// navigation props
dayPickerNavigationInlineStyles?: Record<string, any> | null;
disablePrev?: boolean;
disableNext?: boolean;
navPosition?: NavPositionShape;
navPrev?: React.ReactNode;
navNext?: React.ReactNode;
renderNavPrevButton?:
| ((props: {
ariaLabel: string;
disabled: boolean;
onClick?: React.MouseEventHandler;
onKeyUp?: React.KeyboardEventHandler;
onMouseUp?: React.MouseEventHandler;
}) => React.ReactNode)
| null;
renderNavNextButton?:
| ((props: {
ariaLabel: string;
disabled: boolean;
onClick?: React.MouseEventHandler;
onKeyUp?: React.KeyboardEventHandler;
onMouseUp?: React.MouseEventHandler;
}) => React.ReactNode)
| null;
noNavButtons?: boolean;
noNavNextButton?: boolean;
noNavPrevButton?: boolean;
onPrevMonthClick?: (newCurrentMonth: moment.Moment) => void;
onNextMonthClick?: (newCurrentMonth: moment.Moment) => void;
onMonthChange?: (newMonth: moment.Moment) => void;
onYearChange?: (newMonth: moment.Moment) => void;
onPrevMonthClick?: (newCurrentMonth: momentPropTypes.momentObj) => void;
onNextMonthClick?: (newCurrentMonth: momentPropTypes.momentObj) => void;
onOutsideClick?: (e: any) => void;
renderCalendarDay?: (props: CalendarDayShape) => JSX.Element;
renderDayContents?: (day: momentPropTypes.momentObj) => string | JSX.Element;
renderCalendarInfo?: () => string | JSX.Element;
calendarInfoPosition?: CalendarInfoPositionShape;
// month props
renderWeekHeaderElement?: ((day: string) => React.ReactNode) | null;
// accessibility
onBlur?: () => void;
// accessibility props
isFocused?: boolean;
getFirstFocusableDay?: ((month: moment.Moment) => moment.Moment) | null;
onBlur?: React.KeyboardEventHandler<HTMLDivElement>;
showKeyboardShortcuts?: boolean;
onTab?: React.KeyboardEventHandler<HTMLDivElement>;
onShiftTab?: () => void;
// i18n
monthFormat?: string;
// internationalization
weekDayFormat?: string;
phrases?: SingleDatePickerPhrases;
dayAriaLabelFormat?: string;
phrases?: DayPickerPhrases;
};
isRTL?: boolean;
}
export type DayPicker = React.ComponentClass<DayPickerShape>;
export const DayPicker: React.ComponentClass<DayPickerShape>;
// components/DayPickerSingleDateController.jsx
interface DayPickerSingleDateControllerShape extends DayPickerShape {
date: momentPropTypes.momentObj | null;
onDateChange: (date: momentPropTypes.momentObj | null) => void;
focused: boolean;
onFocusChange: (arg: { focused: boolean | null }) => void;
// components/DayPickerRangeController.jsx
export type DayPickerRangeControllerShape = RenderMonthProps &
Pick<
DayPickerShape,
| 'renderWeekHeaderElement'
| 'enableOutsideDays'
| 'numberOfMonths'
| 'withPortal'
| 'hideKeyboardShortcutsPanel'
| 'daySize'
| 'noBorder'
| 'verticalBorderSpacing'
| 'horizontalMonthPadding'
| 'dayPickerNavigationInlineStyles'
| 'navPosition'
| 'navPrev'
| 'navNext'
| 'renderNavPrevButton'
| 'renderNavNextButton'
| 'noNavButtons'
| 'noNavNextButton'
| 'noNavPrevButton'
| 'onOutsideClick'
| 'renderCalendarDay'
| 'renderDayContents'
| 'renderCalendarInfo'
| 'renderKeyboardShortcutsButton'
| 'renderKeyboardShortcutsPanel'
| 'calendarInfoPosition'
| 'firstDayOfWeek'
| 'verticalHeight'
| 'transitionDuration'
| 'onBlur'
| 'isFocused'
| 'showKeyboardShortcuts'
| 'onTab'
| 'onShiftTab'
| 'monthFormat'
| 'weekDayFormat'
| 'phrases'
| 'dayAriaLabelFormat'
| 'isRTL'
> & {
startDate: moment.Moment | null;
endDate: moment.Moment | null;
onDatesChange: (arg: { startDate: moment.Moment | null; endDate: moment.Moment | null }) => void;
startDateOffset?: (day: moment.Moment) => moment.Moment;
endDateOffset?: (day: moment.Moment) => moment.Moment;
onClose?: (final: { date: momentPropTypes.momentObj }) => void;
focusedInput: FocusedInputShape | null;
onFocusChange: (arg: FocusedInputShape | null) => void;
onClose?: (final: { startDate: moment.Moment | null; endDate: moment.Moment | null }) => void;
keepOpenOnDateSelect?: boolean;
isOutsideRange?: (day: any) => boolean;
isDayBlocked?: (day: any) => boolean;
isDayHighlighted?: (day: any) => boolean;
}
minimumNights?: number;
disabled?: DisabledShape;
isOutsideRange?: (day: moment.Moment) => boolean;
isDayBlocked?: (day: moment.Moment) => boolean;
isDayHighlighted?: (day: moment.Moment) => boolean;
getMinNightsForHoverDate?: (day: moment.Moment) => number;
daysViolatingMinNightsCanBeClicked?: boolean;
type DayPickerSingleDateController = React.ClassicComponentClass<DayPickerSingleDateControllerShape>;
var DayPickerSingleDateController: React.ClassicComponentClass<DayPickerSingleDateControllerShape>;
// DayPicker props
initialVisibleMonth: (() => moment.Moment) | null;
orientation?: ScrollableOrientationShape;
// components/SingleDatePicker.js
type SingleDatePicker = React.ClassicComponentClass<SingleDatePickerShape>;
var SingleDatePicker: React.ClassicComponentClass<SingleDatePickerShape>;
onPrevMonthClick?: (newCurrentMonth: moment.Moment) => void;
onNextMonthClick?: (newCurrentMonth: moment.Moment) => void;
};
// UTILS
//
// utils/isInclusivelyAfterDay.js
var isInclusivelyAfterDay: (a: moment.Moment, b: moment.Moment) => boolean;
// utils/isInclusivelyBeforeDay.js
var isInclusivelyBeforeDay: (a: moment.Moment, b: moment.Moment) => boolean;
// utils/isNextDay.js
var isNextDay: (a: moment.Moment, b: moment.Moment) => boolean;
// utils/isSameDay.js
var isSameDay: (a: moment.Moment, b: moment.Moment) => boolean;
// utils/toISODateString.js
var toISODateString: (date: moment.MomentInput, currentFormat: moment.MomentFormatSpecification) => string | null;
// utils/toLocalizedDateString.js
var toLocalizedDateString: (
date: moment.MomentInput,
currentFormat: moment.MomentFormatSpecification
) => string | null;
// utils/toMomentObject.js
var toMomentObject: (
dateString: moment.MomentInput,
customFormat: moment.MomentFormatSpecification
) => moment.Moment | null;
export type DayPickerRangeController = React.ComponentClass<DayPickerRangeControllerShape>;
export const DayPickerRangeController: React.ComponentClass<DayPickerRangeControllerShape>;
// components/DayPickerSingleDateController.jsx
export type DayPickerSingleDateControllerShape = RenderMonthProps &
Pick<
DayPickerShape,
| 'renderWeekHeaderElement'
| 'enableOutsideDays'
| 'numberOfMonths'
| 'withPortal'
| 'hideKeyboardShortcutsPanel'
| 'daySize'
| 'noBorder'
| 'verticalBorderSpacing'
| 'horizontalMonthPadding'
| 'dayPickerNavigationInlineStyles'
| 'navPosition'
| 'navPrev'
| 'navNext'
| 'renderNavPrevButton'
| 'renderNavNextButton'
| 'noNavButtons'
| 'noNavNextButton'
| 'noNavPrevButton'
| 'onOutsideClick'
| 'renderCalendarDay'
| 'renderDayContents'
| 'renderCalendarInfo'
| 'calendarInfoPosition'
| 'firstDayOfWeek'
| 'verticalHeight'
| 'transitionDuration'
| 'onBlur'
| 'isFocused'
| 'showKeyboardShortcuts'
| 'onTab'
| 'onShiftTab'
| 'monthFormat'
| 'weekDayFormat'
| 'phrases'
| 'dayAriaLabelFormat'
| 'isRTL'
> & {
date: moment.Moment | null;
onDateChange: (date: moment.Moment | null) => void;
focused: boolean;
onFocusChange: (arg: { focused: boolean }) => void;
onClose?: (arg: { date: moment.Moment | null }) => void;
keepOpenOnDateSelect?: boolean;
isOutsideRange?: (day: moment.Moment) => boolean;
isDayBlocked?: (day: moment.Moment) => boolean;
isDayHighlighted?: (day: moment.Moment) => boolean;
// DayPicker props
initialVisibleMonth: (() => moment.Moment) | null;
orientation?: ScrollableOrientationShape;
onPrevMonthClick?: (newCurrentMonth: moment.Moment) => void;
onNextMonthClick?: (newCurrentMonth: moment.Moment) => void;
};
export type DayPickerSingleDateController = React.ComponentClass<DayPickerSingleDateControllerShape>;
export const DayPickerSingleDateController: React.ComponentClass<DayPickerSingleDateControllerShape>;
// components/SingleDatePicker.jsx
export type SingleDatePicker = React.ComponentClass<SingleDatePickerShape>;
export const SingleDatePicker: React.ComponentClass<SingleDatePickerShape>;
// components/SingleDatePickerInput.jsx
export interface SingleDatePickerInputShape {
id: string;
placeholder?: string;
ariaLabel?: string;
displayValue?: string;
screenReaderMessage?: string;
focused?: boolean;
isFocused?: boolean;
disabled?: boolean;
required?: boolean;
readOnly?: boolean;
openDirection?: OpenDirectionShape;
showCaret?: boolean;
showClearDate?: boolean;
customCloseIcon?: React.ReactNode;
showDefaultInputIcon?: boolean;
inputIconPosition?: IconPositionShape;
customInputIcon?: React.ReactNode;
isRTL?: boolean;
noBorder?: boolean;
block?: boolean;
small?: boolean;
regular?: boolean;
verticalSpacing?: number;
onChange?: (dateString: string) => void;
onClearDate?: React.MouseEventHandler<HTMLButtonElement>;
onFocus?: React.FocusEventHandler<HTMLInputElement>;
onKeyDownShiftTab?: React.KeyboardEventHandler<HTMLInputElement>;
onKeyDownTab?: React.KeyboardEventHandler<HTMLInputElement>;
onKeyDownArrowDown?: React.KeyboardEventHandler<HTMLInputElement>;
onKeyDownQuestionMark?: React.KeyboardEventHandler<HTMLInputElement>;
// i18n
phrases?: SingleDatePickerInputPhrases;
}
export type SingleDatePickerInput = React.FC<SingleDatePickerInputShape>;
export const SingleDatePickerInput: React.FC<SingleDatePickerInputShape>;
// UTILS
//
// utils/isInclusivelyAfterDay.js
export function isInclusivelyAfterDay(a: moment.Moment, b: moment.Moment): boolean;
// utils/isInclusivelyBeforeDay.js
export function isInclusivelyBeforeDay(a: moment.Moment, b: moment.Moment): boolean;
// utils/isNextDay.js
export function isNextDay(a: moment.Moment, b: moment.Moment): boolean;
// utils/isSameDay.js
export function isSameDay(a: moment.Moment, b: moment.Moment): boolean;
// utils/toISODateString.js
export function toISODateString(
date: moment.MomentInput,
currentFormat?: moment.MomentFormatSpecification,
): string | null;
// utils/toLocalizedDateString.js
export function toLocalizedDateString(
date: moment.MomentInput,
currentFormat?: moment.MomentFormatSpecification,
): string | null;
// utils/toMomentObject.js
export function toMomentObject(
dateString: moment.MomentInput,
customFormat?: moment.MomentFormatSpecification,
): moment.Moment | null;

12

react-dates/package.json
{
"name": "@types/react-dates",
"version": "17.1.15",
"version": "21.8.0",
"description": "TypeScript definitions for react-dates",

@@ -21,2 +21,7 @@ "license": "MIT",

"githubUsername": "cgriebel"
},
{
"name": "Jason Unger",
"url": "https://github.com/jsonunger",
"githubUsername": "jsonunger"
}

@@ -34,6 +39,7 @@ ],

"@types/react": "*",
"@types/react-outside-click-handler": "*",
"moment": "^2.26.0"
},
"typesPublisherContentHash": "d6fbcd54c856c8143d16deca95f6290558b785426b11ef50bbbf3ff6d9e39a1b",
"typeScriptVersion": "3.1"
"typesPublisherContentHash": "27b7665de57c21bb62efbaa65862f8c6fa97e6f171b2e74bb83c86f25f85fafc",
"typeScriptVersion": "3.2"
}

6

react-dates/README.md

@@ -11,7 +11,7 @@ # Installation

### Additional Details
* Last updated: Mon, 14 Sep 2020 21:07:35 GMT
* Dependencies: [@types/react](https://npmjs.com/package/@types/react), [@types/moment](https://npmjs.com/package/@types/moment)
* Last updated: Wed, 16 Sep 2020 17:07:49 GMT
* Dependencies: [@types/react](https://npmjs.com/package/@types/react), [@types/moment](https://npmjs.com/package/@types/moment), [@types/react-outside-click-handler](https://npmjs.com/package/@types/react-outside-click-handler)
* Global values: none
# Credits
These definitions were written by [Artur Ampilogov](https://github.com/ArturAmpilogov), [Nathan Holland](https://github.com/NathanNZ), and [Chris Griebel](https://github.com/cgriebel).
These definitions were written by [Artur Ampilogov](https://github.com/ArturAmpilogov), [Nathan Holland](https://github.com/NathanNZ), [Chris Griebel](https://github.com/cgriebel), and [Jason Unger](https://github.com/jsonunger).
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc