@types/react-dates

Version 21.8.6
Published 5 months ago
45.5 kB
3 dependencies
MIT license

Install

npm i @types/react-dates

yarn add @types/react-dates

pnpm add @types/react-dates

Overview

TypeScript definitions for react-dates

Index

Variables

variable CalendarDay

const CalendarDay: React.ComponentClass<CalendarDayShape>;

variable CalendarMonth

const CalendarMonth: React.ComponentClass<CalendarMonthShape>;

variable CalendarMonthGrid

const CalendarMonthGrid: React.ComponentClass<CalendarMonthGridShape>;

variable DateRangePicker

const DateRangePicker: React.ComponentClass<DateRangePickerShape>;

variable DateRangePickerInput

const DateRangePickerInput: React.ComponentClass<DateRangePickerInputShape>;

variable DateRangePickerInputController

const DateRangePickerInputController: React.ComponentClass<DateRangePickerInputControllerShape>;

variable DateRangePickerShape

const DateRangePickerShape: DateRangePickerShape;

variable DayPicker

const DayPicker: React.ComponentClass<DayPickerShape>;

variable DayPickerRangeController

const DayPickerRangeController: React.ComponentClass<DayPickerRangeControllerShape>;

variable DayPickerSingleDateController

const DayPickerSingleDateController: React.ComponentClass<DayPickerSingleDateControllerShape>;

variable SingleDatePicker

const SingleDatePicker: React.ComponentClass<SingleDatePickerShape>;

variable SingleDatePickerInput

const SingleDatePickerInput: React.FC<SingleDatePickerInputShape>;

variable SingleDatePickerShape

const SingleDatePickerShape: SingleDatePickerShape;

Functions

function isInclusivelyAfterDay

isInclusivelyAfterDay: (a: moment.Moment, b: moment.Moment) => boolean;

function isInclusivelyBeforeDay

isInclusivelyBeforeDay: (a: moment.Moment, b: moment.Moment) => boolean;

function isNextDay

isNextDay: (a: moment.Moment, b: moment.Moment) => boolean;

function isSameDay

isSameDay: (a: moment.Moment, b: moment.Moment) => boolean;

function toISODateString

toISODateString: (
    date: moment.MomentInput,
    currentFormat?: moment.MomentFormatSpecification
) => string | null;

function toLocalizedDateString

toLocalizedDateString: (
    date: moment.MomentInput,
    currentFormat?: moment.MomentFormatSpecification
) => string | null;

function toMomentObject

toMomentObject: (
    dateString: moment.MomentInput,
    customFormat?: moment.MomentFormatSpecification
) => moment.Moment | null;

Interfaces

interface CalendarDayPhrases

interface CalendarDayPhrases {}

property chooseAvailableDate

chooseAvailableDate?: ((phraseArg: PhraseArg) => string) | undefined;

property dateIsSelected

dateIsSelected?: ((phraseArg: PhraseArg) => string) | undefined;

property dateIsSelectedAsEndDate

dateIsSelectedAsEndDate?: ((phraseArg: PhraseArg) => string) | undefined;

property dateIsSelectedAsStartDate

dateIsSelectedAsStartDate?: ((phraseArg: PhraseArg) => string) | undefined;

property dateIsUnavailable

dateIsUnavailable?: ((phraseArg: PhraseArg) => string) | undefined;

interface CalendarDayShape

interface CalendarDayShape {}

property ariaLabelFormat

ariaLabelFormat?: string | undefined;

property day

day?: moment.Moment | null | undefined;

property daySize

daySize?: number | undefined;

property isFocused

isFocused?: boolean | undefined;

property isOutsideDay

isOutsideDay?: boolean | undefined;

property modifiers

modifiers?: ModifiersShape | undefined;

property onDayClick

onDayClick?:
    | ((
          day: moment.Moment,
          event: React.MouseEvent<HTMLTableDataCellElement>
      ) => void)
    | undefined;

property onDayMouseEnter

onDayMouseEnter?:
    | ((
          day: moment.Moment,
          event: React.MouseEvent<HTMLTableDataCellElement>
      ) => void)
    | undefined;

property onDayMouseLeave

onDayMouseLeave?:
    | ((
          day: moment.Moment,
          event: React.MouseEvent<HTMLTableDataCellElement>
      ) => void)
    | undefined;

property phrases

phrases?: CalendarDayPhrases | undefined;

property renderDayContents

renderDayContents?:
    | ((day: moment.Moment, modifiers: ModifiersShape) => React.ReactNode)
    | null
    | undefined;

property tabIndex

tabIndex?: 0 | -1 | undefined;

interface DateRangePickerInputControllerShape

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'
    > {}

property displayFormat

displayFormat?: string | (() => string) | undefined;

property endDate

endDate?: moment.Moment | null | undefined;

property isOutsideRange

isOutsideRange?: ((day: moment.Moment) => boolean) | undefined;

property keepOpenOnDateSelect

keepOpenOnDateSelect?: boolean | undefined;

property minimumNights

minimumNights?: number | undefined;

property onClose

onClose?:
    | ((final: {
          startDate: moment.Moment | null;
          endDate: moment.Moment | null;
      }) => void)
    | undefined;

property onDatesChange

onDatesChange?:
    | ((arg: {
          startDate: moment.Moment | null;
          endDate: moment.Moment | null;
      }) => void)
    | undefined;

property onFocusChange

onFocusChange?: ((arg: FocusedInputShape | null) => void) | undefined;

property reopenPickerOnClearDates

reopenPickerOnClearDates?: boolean | undefined;

property startDate

startDate?: moment.Moment | null | undefined;

property withFullScreenPortal

withFullScreenPortal?: boolean | undefined;

interface DateRangePickerInputPhrases

interface DateRangePickerInputPhrases {}

property clearDates

clearDates?: string | undefined;

property focusStartDate

focusStartDate?: string | undefined;

property keyboardBackwardNavigationInstructions

keyboardBackwardNavigationInstructions?: string | undefined;

property keyboardForwardNavigationInstructions

keyboardForwardNavigationInstructions?: string | undefined;

interface DateRangePickerInputShape

interface DateRangePickerInputShape {}

property block

block?: boolean | undefined;

property customArrowIcon

customArrowIcon?: React.ReactNode | undefined;

property customCloseIcon

customCloseIcon?: React.ReactNode | undefined;

property customInputIcon

customInputIcon?: React.ReactNode | undefined;

property disabled

disabled?: DisabledShape | undefined;

property endDate

endDate?: string | undefined;

property endDateAriaLabel

endDateAriaLabel?: string | undefined;

property endDateId

endDateId?: string | undefined;

property endDatePlaceholderText

endDatePlaceholderText?: string | undefined;

property inputIconPosition

inputIconPosition?: IconPositionShape | undefined;

property isEndDateFocused

isEndDateFocused?: boolean | undefined;

property isFocused

isFocused?: boolean | undefined;

property isRTL

isRTL?: boolean | undefined;

property isStartDateFocused

isStartDateFocused?: boolean | undefined;

property noBorder

noBorder?: boolean | undefined;

property onClearDates

onClearDates?: React.MouseEventHandler<HTMLButtonElement> | undefined;

property onEndDateChange

onEndDateChange?: ((dateString: string) => void) | undefined;

property onEndDateFocus

onEndDateFocus?: React.FocusEventHandler<HTMLInputElement> | undefined;

property onEndDateTab

onEndDateTab?: React.KeyboardEventHandler<HTMLInputElement> | undefined;

property onKeyDownArrowDown

onKeyDownArrowDown?: React.KeyboardEventHandler<HTMLInputElement> | undefined;

property onKeyDownQuestionMark

onKeyDownQuestionMark?: React.KeyboardEventHandler<HTMLInputElement> | undefined;

property onStartDateChange

onStartDateChange?: ((dateString: string) => void) | undefined;

property onStartDateFocus

onStartDateFocus?: React.FocusEventHandler<HTMLInputElement> | undefined;

property onStartDateShiftTab

onStartDateShiftTab?: React.KeyboardEventHandler<HTMLInputElement> | undefined;

property openDirection

openDirection?: OpenDirectionShape | undefined;

property phrases

phrases?: DateRangePickerInputPhrases | undefined;

property readOnly

readOnly?: boolean | undefined;

property regular

regular?: boolean | undefined;

property required

required?: boolean | undefined;

property screenReaderMessage

screenReaderMessage?: string | undefined;

property showCaret

showCaret?: boolean | undefined;

property showClearDates

showClearDates?: boolean | undefined;

property showDefaultInputIcon

showDefaultInputIcon?: boolean | undefined;

property small

small?: boolean | undefined;

property startDate

startDate?: string | undefined;

property startDateAriaLabel

startDateAriaLabel?: string | undefined;

property startDateId

startDateId?: string | undefined;

property startDatePlaceholderText

startDatePlaceholderText?: string | undefined;

property verticalSpacing

verticalSpacing?: number | undefined;

interface DateRangePickerPhrases

interface DateRangePickerPhrases {}

property calendarLabel

calendarLabel?: string | undefined;

property chooseAvailableEndDate

chooseAvailableEndDate?: ((phraseArg: PhraseArg) => string) | undefined;

property chooseAvailableStartDate

chooseAvailableStartDate?: ((phraseArg: PhraseArg) => string) | undefined;

property clearDates

clearDates?: string | undefined;

property closeDatePicker

closeDatePicker?: string | undefined;

property dateIsSelected

dateIsSelected?: ((phraseArg: PhraseArg) => string) | undefined;

property dateIsSelectedAsEndDate

dateIsSelectedAsEndDate?: ((phraseArg: PhraseArg) => string) | undefined;

property dateIsSelectedAsStartDate

dateIsSelectedAsStartDate?: ((phraseArg: PhraseArg) => string) | undefined;

property dateIsUnavailable

dateIsUnavailable?: ((phraseArg: PhraseArg) => string) | undefined;

property enterKey

enterKey?: string | undefined;

property escape

escape?: string | undefined;

property focusStartDate

focusStartDate?: string | undefined;

property hideKeyboardShortcutsPanel

hideKeyboardShortcutsPanel?: string | undefined;

property homeEnd

homeEnd?: string | undefined;

property jumpToNextMonth

jumpToNextMonth?: string | undefined;

property jumpToPrevMonth

jumpToPrevMonth?: string | undefined;

property keyboardBackwardNavigationInstructions

keyboardBackwardNavigationInstructions?: string | undefined;

property keyboardForwardNavigationInstructions

keyboardForwardNavigationInstructions?: string | undefined;

property keyboardShortcuts

keyboardShortcuts?: string | undefined;

property leftArrowRightArrow

leftArrowRightArrow?: string | undefined;

property moveFocusByOneDay

moveFocusByOneDay?: string | undefined;

property moveFocusByOneMonth

moveFocusByOneMonth?: string | undefined;

property moveFocusByOneWeek

moveFocusByOneWeek?: string | undefined;

property moveFocustoStartAndEndOfWeek

moveFocustoStartAndEndOfWeek?: string | undefined;

property openThisPanel

openThisPanel?: string | undefined;

property pageUpPageDown

pageUpPageDown?: string | undefined;

property questionMark

questionMark?: string | undefined;

property returnFocusToInput

returnFocusToInput?: string | undefined;

property roleDescription

roleDescription?: string | undefined;

property selectFocusedDate

selectFocusedDate?: string | undefined;

property showKeyboardShortcutsPanel

showKeyboardShortcutsPanel?: string | undefined;

property upArrowDownArrow

upArrowDownArrow?: string | undefined;

interface DayPickerKeyboardShortcutsPhrases

interface DayPickerKeyboardShortcutsPhrases {}

property enterKey

enterKey?: string | undefined;

property escape

escape?: string | undefined;

property hideKeyboardShortcutsPanel

hideKeyboardShortcutsPanel?: string | undefined;

property homeEnd

homeEnd?: string | undefined;

property keyboardShortcuts

keyboardShortcuts?: string | undefined;

property leftArrowRightArrow

leftArrowRightArrow?: string | undefined;

property moveFocusByOneDay

moveFocusByOneDay?: string | undefined;

property moveFocusByOneMonth

moveFocusByOneMonth?: string | undefined;

property moveFocusByOneWeek

moveFocusByOneWeek?: string | undefined;

property moveFocustoStartAndEndOfWeek

moveFocustoStartAndEndOfWeek?: string | undefined;

property openThisPanel

openThisPanel?: string | undefined;

property pageUpPageDown

pageUpPageDown?: string | undefined;

property questionMark

questionMark?: string | undefined;

property returnFocusToInput

returnFocusToInput?: string | undefined;

property selectFocusedDate

selectFocusedDate?: string | undefined;

property showKeyboardShortcutsPanel

showKeyboardShortcutsPanel?: string | undefined;

property upArrowDownArrow

upArrowDownArrow?: string | undefined;

interface DayPickerNavigationPhrases

interface DayPickerNavigationPhrases {}

property jumpToNextMonth

jumpToNextMonth?: string | undefined;

property jumpToPrevMonth

jumpToPrevMonth?: string | undefined;

interface DayPickerPhrases

interface DayPickerPhrases {}

property calendarLabel

calendarLabel?: string | undefined;

property chooseAvailableDate

chooseAvailableDate?: ((phraseArg: PhraseArg) => string) | undefined;

property chooseAvailableEndDate

chooseAvailableEndDate?: ((phraseArg: PhraseArg) => string) | undefined;

property chooseAvailableStartDate

chooseAvailableStartDate?: ((phraseArg: PhraseArg) => string) | undefined;

property dateIsSelected

dateIsSelected?: ((phraseArg: PhraseArg) => string) | undefined;

property dateIsSelectedAsEndDate

dateIsSelectedAsEndDate?: ((phraseArg: PhraseArg) => string) | undefined;

property dateIsSelectedAsStartDate

dateIsSelectedAsStartDate?: ((phraseArg: PhraseArg) => string) | undefined;

property dateIsUnavailable

dateIsUnavailable?: ((phraseArg: PhraseArg) => string) | undefined;

property enterKey

enterKey?: string | undefined;

property escape

escape?: string | undefined;

property hideKeyboardShortcutsPanel

hideKeyboardShortcutsPanel?: string | undefined;

property homeEnd

homeEnd?: string | undefined;

property jumpToNextMonth

jumpToNextMonth?: string | undefined;

property jumpToPrevMonth

jumpToPrevMonth?: string | undefined;

property keyboardShortcuts

keyboardShortcuts?: string | undefined;

property leftArrowRightArrow

leftArrowRightArrow?: string | undefined;

property moveFocusByOneDay

moveFocusByOneDay?: string | undefined;

property moveFocusByOneMonth

moveFocusByOneMonth?: string | undefined;

property moveFocusByOneWeek

moveFocusByOneWeek?: string | undefined;

property moveFocustoStartAndEndOfWeek

moveFocustoStartAndEndOfWeek?: string | undefined;

property openThisPanel

openThisPanel?: string | undefined;

property pageUpPageDown

pageUpPageDown?: string | undefined;

property questionMark

questionMark?: string | undefined;

property returnFocusToInput

returnFocusToInput?: string | undefined;

property roleDescription

roleDescription?: string | undefined;

property selectFocusedDate

selectFocusedDate?: string | undefined;

property showKeyboardShortcutsPanel

showKeyboardShortcutsPanel?: string | undefined;

property upArrowDownArrow

upArrowDownArrow?: string | undefined;

interface PhraseArg

interface PhraseArg {}

property date

date: string;

interface SingleDatePickerInputPhrases

interface SingleDatePickerInputPhrases {}

property clearDate

clearDate?: string | undefined;

property keyboardBackwardNavigationInstructions

keyboardBackwardNavigationInstructions?: string | undefined;

property keyboardForwardNavigationInstructions

keyboardForwardNavigationInstructions?: string | undefined;

interface SingleDatePickerInputShape

interface SingleDatePickerInputShape {}

property ariaLabel

ariaLabel?: string | undefined;

property block

block?: boolean | undefined;

property customCloseIcon

customCloseIcon?: React.ReactNode | undefined;

property customInputIcon

customInputIcon?: React.ReactNode | undefined;

property disabled

disabled?: boolean | undefined;

property displayValue

displayValue?: string | undefined;

property focused

focused?: boolean | undefined;

property id

id: string;

property inputIconPosition

inputIconPosition?: IconPositionShape | undefined;

property isFocused

isFocused?: boolean | undefined;

property isRTL

isRTL?: boolean | undefined;

property noBorder

noBorder?: boolean | undefined;

property onChange

onChange?: ((dateString: string) => void) | undefined;

property onClearDate

onClearDate?: React.MouseEventHandler<HTMLButtonElement> | undefined;

property onFocus

onFocus?: React.FocusEventHandler<HTMLInputElement> | undefined;

property onKeyDownArrowDown

onKeyDownArrowDown?: React.KeyboardEventHandler<HTMLInputElement> | undefined;

property onKeyDownQuestionMark

onKeyDownQuestionMark?: React.KeyboardEventHandler<HTMLInputElement> | undefined;

property onKeyDownShiftTab

onKeyDownShiftTab?: React.KeyboardEventHandler<HTMLInputElement> | undefined;

property onKeyDownTab

onKeyDownTab?: React.KeyboardEventHandler<HTMLInputElement> | undefined;

property openDirection

openDirection?: OpenDirectionShape | undefined;

property phrases

phrases?: SingleDatePickerInputPhrases | undefined;

property placeholder

placeholder?: string | undefined;

property readOnly

readOnly?: boolean | undefined;

property regular

regular?: boolean | undefined;

property required

required?: boolean | undefined;

property screenReaderMessage

screenReaderMessage?: string | undefined;

property showCaret

showCaret?: boolean | undefined;

property showClearDate

showClearDate?: boolean | undefined;

property showDefaultInputIcon

showDefaultInputIcon?: boolean | undefined;

property small

small?: boolean | undefined;

property verticalSpacing

verticalSpacing?: number | undefined;

interface SingleDatePickerPhrases

interface SingleDatePickerPhrases {}

property calendarLabel

calendarLabel?: string | undefined;

property chooseAvailableDate

chooseAvailableDate?: ((phraseArg: PhraseArg) => string) | undefined;

property clearDate

clearDate?: string | undefined;

property closeDatePicker

closeDatePicker?: string | undefined;

property dateIsSelected

dateIsSelected?: ((phraseArg: PhraseArg) => string) | undefined;

property dateIsUnavailable

dateIsUnavailable?: ((phraseArg: PhraseArg) => string) | undefined;

property enterKey

enterKey?: string | undefined;

property escape

escape?: string | undefined;

property hideKeyboardShortcutsPanel

hideKeyboardShortcutsPanel?: string | undefined;

property homeEnd

homeEnd?: string | undefined;

property jumpToNextMonth

jumpToNextMonth?: string | undefined;

property jumpToPrevMonth

jumpToPrevMonth?: string | undefined;

property keyboardBackwardNavigationInstructions

keyboardBackwardNavigationInstructions?: string | undefined;

property keyboardForwardNavigationInstructions

keyboardForwardNavigationInstructions?: string | undefined;

property keyboardShortcuts

keyboardShortcuts?: string | undefined;

property leftArrowRightArrow

leftArrowRightArrow?: string | undefined;

property moveFocusByOneDay

moveFocusByOneDay?: string | undefined;

property moveFocusByOneMonth

moveFocusByOneMonth?: string | undefined;

property moveFocusByOneWeek

moveFocusByOneWeek?: string | undefined;

property moveFocustoStartAndEndOfWeek

moveFocustoStartAndEndOfWeek?: string | undefined;

property openThisPanel

openThisPanel?: string | undefined;

property pageUpPageDown

pageUpPageDown?: string | undefined;

property questionMark

questionMark?: string | undefined;

property returnFocusToInput

returnFocusToInput?: string | undefined;

property roleDescription

roleDescription?: string | undefined;

property selectFocusedDate

selectFocusedDate?: string | undefined;

property showKeyboardShortcutsPanel

showKeyboardShortcutsPanel?: string | undefined;

property upArrowDownArrow

upArrowDownArrow?: string | undefined;

Type Aliases

type AnchorDirectionShape

type AnchorDirectionShape = 'left' | 'right';

type CalendarDay

type CalendarDay = React.ComponentClass<CalendarDayShape>;

type CalendarInfoPositionShape

type CalendarInfoPositionShape = 'top' | 'bottom' | 'before' | 'after';

type CalendarMonth

type CalendarMonth = React.ComponentClass<CalendarMonthShape>;

type CalendarMonthGrid

type CalendarMonthGrid = React.ComponentClass<CalendarMonthGridShape>;

type CalendarMonthGridShape

type CalendarMonthGridShape = RenderMonthProps &
    Pick<
        CalendarMonthShape,
        | 'enableOutsideDays'
        | 'horizontalMonthPadding'
        | 'onDayClick'
        | 'onDayMouseEnter'
        | 'onDayMouseLeave'
        | 'renderCalendarDay'
        | 'renderDayContents'
        | 'daySize'
        | 'focusedDate'
        | 'isFocused'
        | 'firstDayOfWeek'
        | 'setMonthTitleHeight'
        | 'verticalBorderSpacing'
        | 'monthFormat'
        | 'phrases'
        | 'dayAriaLabelFormat'
    > & {
        firstVisibleMonthIndex?: number | undefined;
        initialMonth?: moment.Moment | undefined;
        isAnimating?: boolean | undefined;
        numberOfMonths?: number | undefined;
        modifiers?: Record<string, Record<string, ModifiersShape>> | undefined;
        orientation?: ScrollableOrientationShape | undefined;
        onMonthTransitionEnd?:
            | ((event?: React.TransitionEvent<HTMLDivElement>) => void)
            | undefined;
        onMonthChange?: ((newMonth: moment.Moment) => void) | undefined;
        onYearChange?: ((newMonth: moment.Moment) => void) | undefined;
        translationValue?: number | null | undefined;
        isRTL?: boolean | undefined;
        transitionDuration?: number | undefined;
    };

type CalendarMonthShape

type CalendarMonthShape = RenderMonthProps &
    Pick<
        CalendarDayShape,
        | 'daySize'
        | 'onDayClick'
        | 'onDayMouseEnter'
        | 'onDayMouseLeave'
        | 'renderDayContents'
        | 'isFocused'
        | 'phrases'
    > & {
        month?: moment.Moment | undefined;
        horizontalMonthPadding?: number | undefined;
        isVisible?: boolean | undefined;
        enableOutsideDays?: boolean | undefined;
        modifiers?: Record<string, ModifiersShape> | undefined;
        orientation?: ScrollableOrientationShape | undefined;
        onMonthSelect?:
            | ((currentMonth: moment.Moment, newMonthVal: string) => void)
            | undefined;
        onYearSelect?:
            | ((currentMonth: moment.Moment, newMonthVal: string) => void)
            | undefined;
        renderCalendarDay?:
            | ((props: CalendarDayShape) => React.ReactNode)
            | undefined;
        firstDayOfWeek?: DayOfWeekShape | null | undefined;
        setMonthTitleHeight?: ((captionHeight: number) => void) | null | undefined;
        verticalBorderSpacing?: number | undefined;

        focusedDate?: moment.Moment | null | undefined; // indicates focusable day

        // i18n
        monthFormat?: string | undefined;
        dayAriaLabelFormat?: string | undefined;
    };

type DateRangePicker

type DateRangePicker = React.ComponentClass<DateRangePickerShape>;

type DateRangePickerInput

type DateRangePickerInput = React.ComponentClass<DateRangePickerInputShape>;

type DateRangePickerInputController

type DateRangePickerInputController =
    React.ComponentClass<DateRangePickerInputControllerShape>;

type DateRangePickerShape

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;

    onDatesChange: (arg: {
        startDate: moment.Moment | null;
        endDate: moment.Moment | null;
    }) => void;
    onFocusChange: (arg: FocusedInputShape | null) => void;

    onClose?:
        | ((final: {
              startDate: moment.Moment | null;
              endDate: moment.Moment | null;
          }) => void)
        | undefined;

    // input related props
    startDatePlaceholderText?: string | undefined;
    startDateOffset?: ((day: moment.Moment) => moment.Moment) | undefined;
    endDateOffset?: ((day: moment.Moment) => moment.Moment) | undefined;

    endDatePlaceholderText?: string | undefined;
    startDateAriaLabel?: string | undefined;
    endDateAriaLabel?: string | undefined;
    disabled?: DisabledShape | undefined;
    required?: boolean | undefined;
    readOnly?: boolean | undefined;
    screenReaderInputMessage?: string | undefined;
    showClearDates?: boolean | undefined;
    showDefaultInputIcon?: boolean | undefined;
    inputIconPosition?: IconPositionShape | undefined;
    customInputIcon?: React.ReactNode | undefined;
    customArrowIcon?: React.ReactNode | undefined;
    customCloseIcon?: React.ReactNode | undefined;
    noBorder?: boolean | undefined;
    block?: boolean | undefined;
    small?: boolean | undefined;
    regular?: boolean | undefined;
    keepFocusOnInput?: boolean | undefined;
    // calendar presentation and interaction related props
    renderWeekHeaderElement?: ((day: string) => React.ReactNode) | null | undefined;
    orientation?: OrientationShape | undefined;
    anchorDirection?: AnchorDirectionShape | undefined;
    openDirection?: OpenDirectionShape | undefined;
    horizontalMargin?: number | undefined;
    withPortal?: boolean | undefined;
    withFullScreenPortal?: boolean | undefined;
    appendToBody?: boolean | undefined;
    disableScroll?: boolean | undefined;
    daySize?: number | undefined;
    isRTL?: boolean | undefined;
    firstDayOfWeek?: DayOfWeekShape | null | undefined;
    initialVisibleMonth?: (() => moment.Moment) | null | undefined;
    numberOfMonths?: number | undefined;
    keepOpenOnDateSelect?: boolean | undefined;
    reopenPickerOnClearDates?: boolean | undefined;
    renderCalendarInfo?: (() => React.ReactNode) | null | undefined;
    calendarInfoPosition?: CalendarInfoPositionShape | undefined;
    hideKeyboardShortcutsPanel?: boolean | undefined;
    verticalHeight?: number | null | undefined;
    transitionDuration?: number | undefined;
    horizontalMonthPadding?: number | undefined;
    verticalSpacing?: number | undefined;

    // navigation related props
    dayPickerNavigationInlineStyles?: Record<string, any> | null | undefined;
    navPosition?: NavPositionShape | undefined;
    navPrev?: React.ReactNode | undefined;
    navNext?: React.ReactNode | undefined;
    renderNavPrevButton?:
        | ((props: {
              ariaLabel: string;
              disabled: boolean;
              onClick?: React.MouseEventHandler | undefined;
              onKeyUp?: React.KeyboardEventHandler | undefined;
              onMouseUp?: React.MouseEventHandler | undefined;
          }) => React.ReactNode)
        | null
        | undefined;
    renderNavNextButton?:
        | ((props: {
              ariaLabel: string;
              disabled: boolean;
              onClick?: React.MouseEventHandler | undefined;
              onKeyUp?: React.KeyboardEventHandler | undefined;
              onMouseUp?: React.MouseEventHandler | undefined;
          }) => React.ReactNode)
        | null
        | undefined;
    onPrevMonthClick?: ((newCurrentMonth: moment.Moment) => void) | undefined;
    onNextMonthClick?: ((newCurrentMonth: moment.Moment) => void) | undefined;

    // day presentation and interaction related props
    renderCalendarDay?: ((props: CalendarDayShape) => React.ReactNode) | undefined;
    renderDayContents?:
        | ((day: moment.Moment, modifiers: ModifiersShape) => React.ReactNode)
        | null
        | undefined;
    minimumNights?: number | undefined;
    minDate?: moment.Moment | undefined;
    maxDate?: moment.Moment | undefined;
    enableOutsideDays?: boolean | undefined;
    isDayBlocked?: ((day: moment.Moment) => boolean) | undefined;
    isOutsideRange?: ((day: moment.Moment) => boolean) | undefined;
    isDayHighlighted?: ((day: moment.Moment) => boolean) | undefined;

    // internationalization props
    displayFormat?: string | (() => string) | undefined;
    monthFormat?: string | undefined;
    weekDayFormat?: string | undefined;
    phrases?: DateRangePickerPhrases | undefined;
    dayAriaLabelFormat?: string | undefined;
};

type DayOfWeekShape

type DayOfWeekShape = 0 | 1 | 2 | 3 | 4 | 5 | 6;

type DayPicker

type DayPicker = React.ComponentClass<DayPickerShape>;

type DayPickerRangeController

type DayPickerRangeController = React.ComponentClass<DayPickerRangeControllerShape>;

type DayPickerRangeControllerShape

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) | undefined;
        endDateOffset?: ((day: moment.Moment) => moment.Moment) | undefined;
        minDate?: moment.Moment | null | undefined;
        maxDate?: moment.Moment | null | undefined;

        focusedInput: FocusedInputShape | null;
        onFocusChange: (arg: FocusedInputShape | null) => void;
        onClose?:
            | ((final: {
                  startDate: moment.Moment | null;
                  endDate: moment.Moment | null;
              }) => void)
            | undefined;

        keepOpenOnDateSelect?: boolean | undefined;
        minimumNights?: number | undefined;
        disabled?: DisabledShape | undefined;
        isOutsideRange?: ((day: moment.Moment) => boolean) | undefined;
        isDayBlocked?: ((day: moment.Moment) => boolean) | undefined;
        isDayHighlighted?: ((day: moment.Moment) => boolean) | undefined;
        getMinNightsForHoverDate?: ((day: moment.Moment) => number) | undefined;
        daysViolatingMinNightsCanBeClicked?: boolean | undefined;

        // DayPicker props
        initialVisibleMonth: (() => moment.Moment) | null;
        orientation?: ScrollableOrientationShape | undefined;

        onPrevMonthClick?: ((newCurrentMonth: moment.Moment) => void) | undefined;
        onNextMonthClick?: ((newCurrentMonth: moment.Moment) => void) | undefined;
    };

type DayPickerShape

type DayPickerShape = RenderMonthProps &
    Pick<
        CalendarMonthGridShape,
        | 'enableOutsideDays'
        | 'firstDayOfWeek'
        | 'daySize'
        | 'isRTL'
        | 'transitionDuration'
        | 'verticalBorderSpacing'
        | 'horizontalMonthPadding'
        | 'modifiers'
        | 'renderCalendarDay'
        | 'renderDayContents'
        | 'onDayClick'
        | 'onDayMouseEnter'
        | 'onDayMouseLeave'
        | 'monthFormat'
        | 'dayAriaLabelFormat'
    > &
    (
        | {
              orientation?: OrientationShape | undefined;
              onGetNextScrollableMonths?: never | undefined;
              onGetPrevScrollableMonths?: never | undefined;
          }
        | {
              orientation: 'verticalScrollable';
              onGetNextScrollableMonths?:
                  | ((
                        event?:
                            | React.MouseEvent<HTMLElement>
                            | React.KeyboardEvent<HTMLElement>
                    ) => void)
                  | undefined; // VERTICAL_SCROLLABLE daypickers only
              onGetPrevScrollableMonths?:
                  | ((
                        event?:
                            | React.MouseEvent<HTMLElement>
                            | React.KeyboardEvent<HTMLElement>
                    ) => void)
                  | undefined; // VERTICAL_SCROLLABLE daypickers only
          }
    ) & {
        // calendar presentation props
        numberOfMonths?: number | undefined;
        withPortal?: boolean | undefined;
        onOutsideClick?: ReactOutsideClickHandlerProps['onOutsideClick'] | undefined;
        hidden?: boolean | undefined;
        initialVisibleMonth?: (() => moment.Moment) | undefined;
        renderCalendarInfo?: (() => React.ReactNode) | null | undefined;
        calendarInfoPosition?: CalendarInfoPositionShape | undefined;
        hideKeyboardShortcutsPanel?: boolean | undefined;
        verticalHeight?: number | null | undefined;
        noBorder?: boolean | undefined;
        renderKeyboardShortcutsButton?:
            | ((props: {
                  ref: React.Ref<HTMLElement>;
                  onClick: React.MouseEventHandler;
                  ariaLabel: string;
              }) => React.ReactNode)
            | undefined;
        renderKeyboardShortcutsPanel?:
            | ((props: {
                  closeButtonAriaLabel: string;
                  keyboardShortcuts: Array<
                      Record<'unicode' | 'label' | 'action', string>
                  >;
                  onCloseButtonClick: React.MouseEventHandler;
                  onKeyDown: React.KeyboardEventHandler;
                  title: string;
              }) => React.ReactNode)
            | undefined;

        // navigation props
        dayPickerNavigationInlineStyles?: Record<string, any> | null | undefined;
        disablePrev?: boolean | undefined;
        disableNext?: boolean | undefined;
        navPosition?: NavPositionShape | undefined;
        navPrev?: React.ReactNode | undefined;
        navNext?: React.ReactNode | undefined;
        renderNavPrevButton?:
            | ((props: {
                  ariaLabel: string;
                  disabled: boolean;
                  onClick?: React.MouseEventHandler | undefined;
                  onKeyUp?: React.KeyboardEventHandler | undefined;
                  onMouseUp?: React.MouseEventHandler | undefined;
              }) => React.ReactNode)
            | null
            | undefined;
        renderNavNextButton?:
            | ((props: {
                  ariaLabel: string;
                  disabled: boolean;
                  onClick?: React.MouseEventHandler | undefined;
                  onKeyUp?: React.KeyboardEventHandler | undefined;
                  onMouseUp?: React.MouseEventHandler | undefined;
              }) => React.ReactNode)
            | null
            | undefined;
        noNavButtons?: boolean | undefined;
        noNavNextButton?: boolean | undefined;
        noNavPrevButton?: boolean | undefined;
        onPrevMonthClick?: ((newCurrentMonth: moment.Moment) => void) | undefined;
        onNextMonthClick?: ((newCurrentMonth: moment.Moment) => void) | undefined;
        onMonthChange?: ((newMonth: moment.Moment) => void) | undefined;
        onYearChange?: ((newMonth: moment.Moment) => void) | undefined;

        // month props
        renderWeekHeaderElement?:
            | ((day: string) => React.ReactNode)
            | null
            | undefined;

        // accessibility props
        isFocused?: boolean | undefined;
        getFirstFocusableDay?:
            | ((month: moment.Moment) => moment.Moment)
            | null
            | undefined;
        onBlur?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
        showKeyboardShortcuts?: boolean | undefined;
        onTab?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
        onShiftTab?: (() => void) | undefined;

        // internationalization
        weekDayFormat?: string | undefined;
        phrases?: DayPickerPhrases | undefined;
    };

type DayPickerSingleDateController

type DayPickerSingleDateController =
    React.ComponentClass<DayPickerSingleDateControllerShape>;

type DayPickerSingleDateControllerShape

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;
        minDate?: moment.Moment | null | undefined;
        maxDate?: moment.Moment | null | undefined;
        onDateChange: (date: moment.Moment | null) => void;

        focused: boolean;
        onFocusChange: (arg: { focused: boolean }) => void;
        onClose?: ((arg: { date: moment.Moment | null }) => void) | undefined;

        keepOpenOnDateSelect?: boolean | undefined;
        isOutsideRange?: ((day: moment.Moment) => boolean) | undefined;
        isDayBlocked?: ((day: moment.Moment) => boolean) | undefined;
        isDayHighlighted?: ((day: moment.Moment) => boolean) | undefined;

        // DayPicker props
        initialVisibleMonth: (() => moment.Moment) | null;
        orientation?: ScrollableOrientationShape | undefined;

        onPrevMonthClick?: ((newCurrentMonth: moment.Moment) => void) | undefined;
        onNextMonthClick?: ((newCurrentMonth: moment.Moment) => void) | undefined;
    };

type DisabledShape

type DisabledShape = boolean | 'startDate' | 'endDate';

type FocusedInputShape

type FocusedInputShape = 'startDate' | 'endDate';

type IconPositionShape

type IconPositionShape = 'before' | 'after';

type ModifiersShape

type ModifiersShape = Set<string>;

type NavPositionShape

type NavPositionShape = 'navPositionTop' | 'navPositionBottom';

type OpenDirectionShape

type OpenDirectionShape = 'down' | 'up';

type OrientationShape

type OrientationShape = 'horizontal' | 'vertical';

type RenderMonthProps

type RenderMonthProps =
    | {
          renderMonthText?:
              | ((month: moment.Moment) => React.ReactNode)
              | null
              | undefined;
          renderMonthElement?: never | undefined;
      }
    | {
          renderMonthText?: never | undefined;
          renderMonthElement?:
              | ((props: {
                    month: moment.Moment;
                    onMonthSelect: (
                        currentMonth: moment.Moment,
                        newMonthVal: string
                    ) => void;
                    onYearSelect: (
                        currentMonth: moment.Moment,
                        newMonthVal: string
                    ) => void;
                    isVisible: boolean;
                }) => React.ReactNode)
              | null
              | undefined;
      };

type ScrollableOrientationShape

type ScrollableOrientationShape = 'horizontal' | 'vertical' | 'verticalScrollable';

type SingleDatePicker

type SingleDatePicker = React.ComponentClass<SingleDatePickerShape>;

type SingleDatePickerInput

type SingleDatePickerInput = React.FC<SingleDatePickerInputShape>;

type SingleDatePickerShape

type SingleDatePickerShape = RenderMonthProps & {
    id: string;

    // required props for a functional interactive SingleDatePicker
    date: moment.Moment | null;
    focused: boolean;

    onDateChange: (date: moment.Moment | null) => void;
    onFocusChange: (arg: { focused: boolean }) => void;

    // input related props
    placeholder?: string | undefined;
    ariaLabel?: string | undefined;
    disabled?: boolean | undefined;
    required?: boolean | undefined;
    readOnly?: boolean | undefined;
    screenReaderInputMessage?: string | undefined;
    showClearDate?: boolean | undefined;
    customCloseIcon?: React.ReactNode | undefined;
    showDefaultInputIcon?: boolean | undefined;
    inputIconPosition?: IconPositionShape | undefined;
    customInputIcon?: React.ReactNode | undefined;
    noBorder?: boolean | undefined;
    block?: boolean | undefined;
    small?: boolean | undefined;
    regular?: boolean | undefined;
    verticalSpacing?: number | undefined;
    keepFocusOnInput?: boolean | undefined;

    // calendar presentation and interaction related props
    renderWeekHeaderElement?: ((day: string) => React.ReactNode) | null | undefined;
    orientation?: OrientationShape | undefined;
    anchorDirection?: AnchorDirectionShape | undefined;
    openDirection?: OpenDirectionShape | undefined;
    horizontalMargin?: number | undefined;
    withPortal?: boolean | undefined;
    withFullScreenPortal?: boolean | undefined;
    appendToBody?: boolean | undefined;
    disableScroll?: boolean | undefined;
    initialVisibleMonth?: (() => moment.Moment) | null | undefined;
    firstDayOfWeek?: DayOfWeekShape | null | undefined;
    numberOfMonths?: number | undefined;
    keepOpenOnDateSelect?: boolean | undefined;
    reopenPickerOnClearDate?: boolean | undefined;
    renderCalendarInfo?: (() => React.ReactNode) | null | undefined;
    calendarInfoPosition?: CalendarInfoPositionShape | undefined;
    hideKeyboardShortcutsPanel?: boolean | undefined;
    daySize?: number | undefined;
    isRTL?: boolean | undefined;
    verticalHeight?: number | undefined;
    transitionDuration?: number | undefined;
    horizontalMonthPadding?: number | undefined;

    // navigation related props
    dayPickerNavigationInlineStyles?: Record<string, any> | null | undefined;
    navPosition?: NavPositionShape | undefined;
    navPrev?: React.ReactNode | undefined;
    navNext?: React.ReactNode | undefined;
    renderNavPrevButton?:
        | ((props: {
              ariaLabel: string;
              disabled: boolean;
              onClick?: React.MouseEventHandler | undefined;
              onKeyUp?: React.KeyboardEventHandler | undefined;
              onMouseUp?: React.MouseEventHandler | undefined;
          }) => React.ReactNode)
        | null
        | undefined;
    renderNavNextButton?:
        | ((props: {
              ariaLabel: string;
              disabled: boolean;
              onClick?: React.MouseEventHandler | undefined;
              onKeyUp?: React.KeyboardEventHandler | undefined;
              onMouseUp?: React.MouseEventHandler | undefined;
          }) => React.ReactNode)
        | null
        | undefined;
    onPrevMonthClick?: ((newCurrentMonth: moment.Moment) => void) | undefined;
    onNextMonthClick?: ((newCurrentMonth: moment.Moment) => void) | undefined;
    onClose?: ((arg: { date: moment.Moment | null }) => void) | undefined;

    // day presentation and interaction related props
    renderCalendarDay?: ((props: CalendarDayShape) => React.ReactNode) | undefined;
    renderDayContents?:
        | ((day: moment.Moment, modifiers: ModifiersShape) => React.ReactNode)
        | null
        | undefined;
    enableOutsideDays?: boolean | undefined;
    isDayBlocked?: ((day: moment.Moment) => boolean) | undefined;
    isOutsideRange?: ((day: moment.Moment) => boolean) | undefined;
    isDayHighlighted?: ((day: moment.Moment) => boolean) | undefined;

    // internationalization props
    displayFormat?: string | (() => string) | undefined;
    monthFormat?: string | undefined;
    weekDayFormat?: string | undefined;
    phrases?: SingleDatePickerPhrases | undefined;
    dayAriaLabelFormat?: string | undefined;
};

Package Files (1)

index.d.ts

Dependencies (3)

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (0)

No peer dependencies.

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@types/react-dates.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@types/react-dates)

HTML

<a href="https://www.jsdocs.io/package/@types/react-dates"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 5 months ago.
Package analyzed in 6057 ms.
Missing or incorrect documentation? Open an issue for this package.