• Version 4.4.2
  • Published
  • 14.8 kB
  • 4 dependencies
  • MIT license


npm i @types/react-datepicker
yarn add @types/react-datepicker
pnpm add @types/react-datepicker


TypeScript definitions for react-datepicker






function CalendarContainer

CalendarContainer: (props: CalendarContainerProps) => React.ReactElement;

    function getDefaultLocale

    getDefaultLocale: () => string;

      function registerLocale

      registerLocale: (localeName: string, localeData: Locale) => void;

        function setDefaultLocale

        setDefaultLocale: (localeName: string) => void;


          class ReactDatePicker

          class ReactDatePicker<
          CustomModifierNames extends string = never,
          WithRange extends boolean | undefined = undefined
          > extends React.Component<ReactDatePickerProps<CustomModifierNames, WithRange>> {}

            property isCalendarOpen

            readonly isCalendarOpen: () => boolean;

              property setBlur

              readonly setBlur: () => void;

                property setFocus

                readonly setFocus: () => void;

                  property setOpen

                  readonly setOpen: (open: boolean, skipSetBlur?: boolean) => void;


                    interface CalendarContainerProps

                    interface CalendarContainerProps {}

                      property arrowProps

                      arrowProps?: { [propName: string]: any } | undefined;

                        property children

                        children?: React.ReactNode | React.ReactNode[] | undefined;

                          property className

                          className?: string | undefined;

                            property showPopperArrow

                            showPopperArrow?: boolean | undefined;

                              interface ReactDatePickerCustomHeaderProps

                              interface ReactDatePickerCustomHeaderProps {}

                                property customHeaderCount

                                customHeaderCount: number;

                                  property date

                                  date: Date;

                                    property monthDate

                                    monthDate: Date;

                                      property nextMonthButtonDisabled

                                      nextMonthButtonDisabled: boolean;

                                        property nextYearButtonDisabled

                                        nextYearButtonDisabled: boolean;

                                          property prevMonthButtonDisabled

                                          prevMonthButtonDisabled: boolean;

                                            property prevYearButtonDisabled

                                            prevYearButtonDisabled: boolean;

                                              method changeMonth

                                              changeMonth: (month: number) => void;

                                                method changeYear

                                                changeYear: (year: number) => void;

                                                  method decreaseMonth

                                                  decreaseMonth: () => void;

                                                    method decreaseYear

                                                    decreaseYear: () => void;

                                                      method increaseMonth

                                                      increaseMonth: () => void;

                                                        method increaseYear

                                                        increaseYear: () => void;

                                                          interface ReactDatePickerProps

                                                          interface ReactDatePickerProps<
                                                          CustomModifierNames extends string = never,
                                                          WithRange extends boolean | undefined = undefined
                                                          > {}

                                                            property adjustDateOnChange

                                                            adjustDateOnChange?: boolean | undefined;

                                                              property allowSameDay

                                                              allowSameDay?: boolean | undefined;

                                                                property ariaDescribedBy

                                                                ariaDescribedBy?: string | undefined;

                                                                  property ariaInvalid

                                                                  ariaInvalid?: string | undefined;

                                                                    property ariaLabelClose

                                                                    ariaLabelClose?: string | undefined;

                                                                      property ariaLabelledBy

                                                                      ariaLabelledBy?: string | undefined;

                                                                        property ariaRequired

                                                                        ariaRequired?: string | undefined;

                                                                          property autoComplete

                                                                          autoComplete?: string | undefined;

                                                                            property autoFocus

                                                                            autoFocus?: boolean | undefined;

                                                                              property calendarClassName

                                                                              calendarClassName?: string | undefined;

                                                                                property calendarStartDay

                                                                                calendarStartDay?: number | undefined;

                                                                                  property children

                                                                                  children?: React.ReactNode | undefined;

                                                                                    property chooseDayAriaLabelPrefix

                                                                                    chooseDayAriaLabelPrefix?: string | undefined;

                                                                                      property className

                                                                                      className?: string | undefined;

                                                                                        property clearButtonClassName

                                                                                        clearButtonClassName?: string | undefined;

                                                                                          property clearButtonTitle

                                                                                          clearButtonTitle?: string | undefined;

                                                                                            property closeOnScroll

                                                                                            closeOnScroll?: boolean | ((e: Event) => boolean) | undefined;

                                                                                              property customInput

                                                                                              customInput?: React.ReactNode | undefined;

                                                                                                property customInputRef

                                                                                                customInputRef?: string | undefined;

                                                                                                  property customTimeInput

                                                                                                  customTimeInput?: React.ReactNode | undefined;

                                                                                                    property dateFormat

                                                                                                    dateFormat?: string | string[] | undefined;

                                                                                                      property dateFormatCalendar

                                                                                                      dateFormatCalendar?: string | undefined;

                                                                                                        property disabled

                                                                                                        disabled?: boolean | undefined;

                                                                                                          property disabledDayAriaLabelPrefix

                                                                                                          disabledDayAriaLabelPrefix?: string | undefined;

                                                                                                            property disabledKeyboardNavigation

                                                                                                            disabledKeyboardNavigation?: boolean | undefined;

                                                                                                              property dropdownMode

                                                                                                              dropdownMode?: 'scroll' | 'select' | undefined;

                                                                                                                property enableTabLoop

                                                                                                                enableTabLoop?: boolean | undefined;

                                                                                                                  property endDate

                                                                                                                  endDate?: Date | null | undefined;

                                                                                                                    property excludeDateIntervals

                                                                                                                    excludeDateIntervals?: Array<{ start: Date; end: Date }> | undefined;

                                                                                                                      property excludeDates

                                                                                                                      excludeDates?: Date[] | undefined;

                                                                                                                        property excludeScrollbar

                                                                                                                        excludeScrollbar?: boolean | undefined;

                                                                                                                          property excludeTimes

                                                                                                                          excludeTimes?: Date[] | undefined;

                                                                                                                            property fixedHeight

                                                                                                                            fixedHeight?: boolean | undefined;

                                                                                                                              property focusSelectedMonth

                                                                                                                              focusSelectedMonth?: boolean | undefined;

                                                                                                                                property forceShowMonthNavigation

                                                                                                                                forceShowMonthNavigation?: boolean | undefined;

                                                                                                                                  property highlightDates

                                                                                                                                  highlightDates?: Array<HighlightDates | Date> | undefined;

                                                                                                                                    property id

                                                                                                                                    id?: string | undefined;

                                                                                                                                      property includeDateIntervals

                                                                                                                                      includeDateIntervals?: Array<{ start: Date; end: Date }> | undefined;

                                                                                                                                        property includeDates

                                                                                                                                        includeDates?: Date[] | undefined;

                                                                                                                                          property includeTimes

                                                                                                                                          includeTimes?: Date[] | undefined;

                                                                                                                                            property injectTimes

                                                                                                                                            injectTimes?: Date[] | undefined;

                                                                                                                                              property inline

                                                                                                                                              inline?: boolean | undefined;

                                                                                                                                                property isClearable

                                                                                                                                                isClearable?: boolean | undefined;

                                                                                                                                                  property locale

                                                                                                                                                  locale?: string | Locale | undefined;

                                                                                                                                                    property maxDate

                                                                                                                                                    maxDate?: Date | null | undefined;

                                                                                                                                                      property maxTime

                                                                                                                                                      maxTime?: Date | undefined;

                                                                                                                                                        property minDate

                                                                                                                                                        minDate?: Date | null | undefined;

                                                                                                                                                          property minTime

                                                                                                                                                          minTime?: Date | undefined;

                                                                                                                                                            property monthsShown

                                                                                                                                                            monthsShown?: number | undefined;

                                                                                                                                                              property name

                                                                                                                                                              name?: string | undefined;

                                                                                                                                                                property nextMonthAriaLabel

                                                                                                                                                                nextMonthAriaLabel?: string | undefined;

                                                                                                                                                                  property nextMonthButtonLabel

                                                                                                                                                                  nextMonthButtonLabel?: string | React.ReactNode | undefined;

                                                                                                                                                                    property nextYearAriaLabel

                                                                                                                                                                    nextYearAriaLabel?: string | undefined;

                                                                                                                                                                      property nextYearButtonLabel

                                                                                                                                                                      nextYearButtonLabel?: string | React.ReactNode | undefined;

                                                                                                                                                                        property onDayMouseEnter

                                                                                                                                                                        onDayMouseEnter?: ((date: Date) => void) | undefined;

                                                                                                                                                                          property onMonthMouseLeave

                                                                                                                                                                          onMonthMouseLeave?: (() => void) | undefined;

                                                                                                                                                                            property open

                                                                                                                                                                            open?: boolean | undefined;

                                                                                                                                                                              property openToDate

                                                                                                                                                                              openToDate?: Date | undefined;

                                                                                                                                                                                property peekNextMonth

                                                                                                                                                                                peekNextMonth?: boolean | undefined;

                                                                                                                                                                                  property placeholderText

                                                                                                                                                                                  placeholderText?: string | undefined;

                                                                                                                                                                                    property popperClassName

                                                                                                                                                                                    popperClassName?: string | undefined;

                                                                                                                                                                                      property popperModifiers

                                                                                                                                                                                      | ReadonlyArray<Modifier<StrictModifierNames | CustomModifierNames>>
                                                                                                                                                                                      | undefined;

                                                                                                                                                                                        property popperPlacement

                                                                                                                                                                                        popperPlacement?: Popper.Placement | undefined;

                                                                                                                                                                                          property popperProps

                                                                                                                                                                                          popperProps?: {} | undefined;

                                                                                                                                                                                            property portalHost

                                                                                                                                                                                            portalHost?: ShadowRoot | undefined;

                                                                                                                                                                                              property portalId

                                                                                                                                                                                              portalId?: string | undefined;

                                                                                                                                                                                                property preventOpenOnFocus

                                                                                                                                                                                                preventOpenOnFocus?: boolean | undefined;

                                                                                                                                                                                                  property previousMonthAriaLabel

                                                                                                                                                                                                  previousMonthAriaLabel?: string | undefined;

                                                                                                                                                                                                    property previousMonthButtonLabel

                                                                                                                                                                                                    previousMonthButtonLabel?: string | React.ReactNode | undefined;

                                                                                                                                                                                                      property previousYearAriaLabel

                                                                                                                                                                                                      previousYearAriaLabel?: string | undefined;

                                                                                                                                                                                                        property previousYearButtonLabel

                                                                                                                                                                                                        previousYearButtonLabel?: string | React.ReactNode | undefined;

                                                                                                                                                                                                          property readOnly

                                                                                                                                                                                                          readOnly?: boolean | undefined;

                                                                                                                                                                                                            property required

                                                                                                                                                                                                            required?: boolean | undefined;

                                                                                                                                                                                                              property scrollableMonthYearDropdown

                                                                                                                                                                                                              scrollableMonthYearDropdown?: boolean | undefined;

                                                                                                                                                                                                                property scrollableYearDropdown

                                                                                                                                                                                                                scrollableYearDropdown?: boolean | undefined;

                                                                                                                                                                                                                  property selected

                                                                                                                                                                                                                  selected?: Date | null | undefined;

                                                                                                                                                                                                                    property selectsEnd

                                                                                                                                                                                                                    selectsEnd?: boolean | undefined;

                                                                                                                                                                                                                      property selectsRange

                                                                                                                                                                                                                      selectsRange?: WithRange;

                                                                                                                                                                                                                        property selectsStart

                                                                                                                                                                                                                        selectsStart?: boolean | undefined;

                                                                                                                                                                                                                          property shouldCloseOnSelect

                                                                                                                                                                                                                          shouldCloseOnSelect?: boolean | undefined;

                                                                                                                                                                                                                            property showDisabledMonthNavigation

                                                                                                                                                                                                                            showDisabledMonthNavigation?: boolean | undefined;

                                                                                                                                                                                                                              property showFourColumnMonthYearPicker

                                                                                                                                                                                                                              showFourColumnMonthYearPicker?: boolean | undefined;

                                                                                                                                                                                                                                property showFullMonthYearPicker

                                                                                                                                                                                                                                showFullMonthYearPicker?: boolean | undefined;

                                                                                                                                                                                                                                  property showMonthDropdown

                                                                                                                                                                                                                                  showMonthDropdown?: boolean | undefined;

                                                                                                                                                                                                                                    property showMonthYearDropdown

                                                                                                                                                                                                                                    showMonthYearDropdown?: boolean | undefined;

                                                                                                                                                                                                                                      property showMonthYearPicker

                                                                                                                                                                                                                                      showMonthYearPicker?: boolean | undefined;

                                                                                                                                                                                                                                        property showPopperArrow

                                                                                                                                                                                                                                        showPopperArrow?: boolean | undefined;

                                                                                                                                                                                                                                          property showPreviousMonths

                                                                                                                                                                                                                                          showPreviousMonths?: boolean | undefined;

                                                                                                                                                                                                                                            property showQuarterYearPicker

                                                                                                                                                                                                                                            showQuarterYearPicker?: boolean | undefined;

                                                                                                                                                                                                                                              property showTimeInput

                                                                                                                                                                                                                                              showTimeInput?: boolean | undefined;

                                                                                                                                                                                                                                                property showTimeSelect

                                                                                                                                                                                                                                                showTimeSelect?: boolean | undefined;

                                                                                                                                                                                                                                                  property showTimeSelectOnly

                                                                                                                                                                                                                                                  showTimeSelectOnly?: boolean | undefined;

                                                                                                                                                                                                                                                    property showTwoColumnMonthYearPicker

                                                                                                                                                                                                                                                    showTwoColumnMonthYearPicker?: boolean | undefined;

                                                                                                                                                                                                                                                      property showWeekNumbers

                                                                                                                                                                                                                                                      showWeekNumbers?: boolean | undefined;

                                                                                                                                                                                                                                                        property showYearDropdown

                                                                                                                                                                                                                                                        showYearDropdown?: boolean | undefined;

                                                                                                                                                                                                                                                          property showYearPicker

                                                                                                                                                                                                                                                          showYearPicker?: boolean | undefined;

                                                                                                                                                                                                                                                            property startDate

                                                                                                                                                                                                                                                            startDate?: Date | null | undefined;

                                                                                                                                                                                                                                                              property startOpen

                                                                                                                                                                                                                                                              startOpen?: boolean | undefined;

                                                                                                                                                                                                                                                                property strictParsing

                                                                                                                                                                                                                                                                strictParsing?: boolean | undefined;

                                                                                                                                                                                                                                                                  property tabIndex

                                                                                                                                                                                                                                                                  tabIndex?: number | undefined;

                                                                                                                                                                                                                                                                    property timeCaption

                                                                                                                                                                                                                                                                    timeCaption?: string | undefined;

                                                                                                                                                                                                                                                                      property timeFormat

                                                                                                                                                                                                                                                                      timeFormat?: string | undefined;

                                                                                                                                                                                                                                                                        property timeInputLabel

                                                                                                                                                                                                                                                                        timeInputLabel?: string | undefined;

                                                                                                                                                                                                                                                                          property timeIntervals

                                                                                                                                                                                                                                                                          timeIntervals?: number | undefined;

                                                                                                                                                                                                                                                                            property title

                                                                                                                                                                                                                                                                            title?: string | undefined;

                                                                                                                                                                                                                                                                              property todayButton

                                                                                                                                                                                                                                                                              todayButton?: React.ReactNode | undefined;

                                                                                                                                                                                                                                                                                property useShortMonthInDropdown

                                                                                                                                                                                                                                                                                useShortMonthInDropdown?: boolean | undefined;

                                                                                                                                                                                                                                                                                  property useWeekdaysShort

                                                                                                                                                                                                                                                                                  useWeekdaysShort?: boolean | undefined;

                                                                                                                                                                                                                                                                                    property value

                                                                                                                                                                                                                                                                                    value?: string | undefined;

                                                                                                                                                                                                                                                                                      property weekAriaLabelPrefix

                                                                                                                                                                                                                                                                                      weekAriaLabelPrefix?: string | undefined;

                                                                                                                                                                                                                                                                                        property weekLabel

                                                                                                                                                                                                                                                                                        weekLabel?: string | undefined;

                                                                                                                                                                                                                                                                                          property withPortal

                                                                                                                                                                                                                                                                                          withPortal?: boolean | undefined;

                                                                                                                                                                                                                                                                                            property wrapperClassName

                                                                                                                                                                                                                                                                                            wrapperClassName?: string | undefined;

                                                                                                                                                                                                                                                                                              property yearDropdownItemNumber

                                                                                                                                                                                                                                                                                              yearDropdownItemNumber?: number | undefined;

                                                                                                                                                                                                                                                                                                property yearItemNumber

                                                                                                                                                                                                                                                                                                yearItemNumber?: number | undefined;

                                                                                                                                                                                                                                                                                                  method calendarContainer

                                                                                                                                                                                                                                                                                                  calendarContainer: (props: CalendarContainerProps) => React.ReactNode;

                                                                                                                                                                                                                                                                                                    method dayClassName

                                                                                                                                                                                                                                                                                                    dayClassName: (date: Date) => string | null;

                                                                                                                                                                                                                                                                                                      method filterDate

                                                                                                                                                                                                                                                                                                      filterDate: (date: Date) => boolean;

                                                                                                                                                                                                                                                                                                        method filterTime

                                                                                                                                                                                                                                                                                                        filterTime: (date: Date) => boolean;

                                                                                                                                                                                                                                                                                                          method formatWeekDay

                                                                                                                                                                                                                                                                                                          formatWeekDay: (formattedDate: string) => React.ReactNode;

                                                                                                                                                                                                                                                                                                            method formatWeekNumber

                                                                                                                                                                                                                                                                                                            formatWeekNumber: (date: Date) => string | number;

                                                                                                                                                                                                                                                                                                              method monthClassName

                                                                                                                                                                                                                                                                                                              monthClassName: (date: Date) => string | null;

                                                                                                                                                                                                                                                                                                                method onBlur

                                                                                                                                                                                                                                                                                                                onBlur: (event: React.FocusEvent<HTMLInputElement>) => void;

                                                                                                                                                                                                                                                                                                                  method onCalendarClose

                                                                                                                                                                                                                                                                                                                  onCalendarClose: () => void;

                                                                                                                                                                                                                                                                                                                    method onCalendarOpen

                                                                                                                                                                                                                                                                                                                    onCalendarOpen: () => void;

                                                                                                                                                                                                                                                                                                                      method onChange

                                                                                                                                                                                                                                                                                                                      onChange: (
                                                                                                                                                                                                                                                                                                                      date: WithRange extends false | undefined
                                                                                                                                                                                                                                                                                                                      ? Date | null
                                                                                                                                                                                                                                                                                                                      : [Date | null, Date | null],
                                                                                                                                                                                                                                                                                                                      event: React.SyntheticEvent<any> | undefined
                                                                                                                                                                                                                                                                                                                      ) => void;

                                                                                                                                                                                                                                                                                                                        method onChangeRaw

                                                                                                                                                                                                                                                                                                                        onChangeRaw: (event: React.FocusEvent<HTMLInputElement>) => void;

                                                                                                                                                                                                                                                                                                                          method onClickOutside

                                                                                                                                                                                                                                                                                                                          onClickOutside: (event: React.MouseEvent<HTMLDivElement>) => void;

                                                                                                                                                                                                                                                                                                                            method onFocus

                                                                                                                                                                                                                                                                                                                            onFocus: (event: React.FocusEvent<HTMLInputElement>) => void;

                                                                                                                                                                                                                                                                                                                              method onInputClick

                                                                                                                                                                                                                                                                                                                              onInputClick: () => void;

                                                                                                                                                                                                                                                                                                                                method onInputError

                                                                                                                                                                                                                                                                                                                                onInputError: (err: { code: number; msg: string }) => void;

                                                                                                                                                                                                                                                                                                                                  method onKeyDown

                                                                                                                                                                                                                                                                                                                                  onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;

                                                                                                                                                                                                                                                                                                                                    method onMonthChange

                                                                                                                                                                                                                                                                                                                                    onMonthChange: (date: Date) => void;

                                                                                                                                                                                                                                                                                                                                      method onSelect

                                                                                                                                                                                                                                                                                                                                      onSelect: (date: Date, event: React.SyntheticEvent<any> | undefined) => void;

                                                                                                                                                                                                                                                                                                                                        method onWeekSelect

                                                                                                                                                                                                                                                                                                                                        onWeekSelect: (
                                                                                                                                                                                                                                                                                                                                        firstDayOfWeek: Date,
                                                                                                                                                                                                                                                                                                                                        weekNumber: string | number,
                                                                                                                                                                                                                                                                                                                                        event: React.SyntheticEvent<any> | undefined
                                                                                                                                                                                                                                                                                                                                        ) => void;

                                                                                                                                                                                                                                                                                                                                          method onYearChange

                                                                                                                                                                                                                                                                                                                                          onYearChange: (date: Date) => void;

                                                                                                                                                                                                                                                                                                                                            method popperContainer

                                                                                                                                                                                                                                                                                                                                            popperContainer: (props: { children: React.ReactNode[] }) => React.ReactNode;

                                                                                                                                                                                                                                                                                                                                              method renderCustomHeader

                                                                                                                                                                                                                                                                                                                                              renderCustomHeader: (
                                                                                                                                                                                                                                                                                                                                              params: ReactDatePickerCustomHeaderProps
                                                                                                                                                                                                                                                                                                                                              ) => React.ReactNode;

                                                                                                                                                                                                                                                                                                                                                method renderDayContents

                                                                                                                                                                                                                                                                                                                                                renderDayContents: (dayOfMonth: number, date?: Date) => React.ReactNode;

                                                                                                                                                                                                                                                                                                                                                  method timeClassName

                                                                                                                                                                                                                                                                                                                                                  timeClassName: (date: Date) => string | null;

                                                                                                                                                                                                                                                                                                                                                    method weekDayClassName

                                                                                                                                                                                                                                                                                                                                                    weekDayClassName: (date: Date) => string | null;

                                                                                                                                                                                                                                                                                                                                                      Package Files (1)

                                                                                                                                                                                                                                                                                                                                                      Dependencies (4)

                                                                                                                                                                                                                                                                                                                                                      Dev Dependencies (0)

                                                                                                                                                                                                                                                                                                                                                      No dev dependencies.

                                                                                                                                                                                                                                                                                                                                                      Peer Dependencies (0)

                                                                                                                                                                                                                                                                                                                                                      No peer dependencies.


                                                                                                                                                                                                                                                                                                                                                      To add a badge like this onejsDocs.io badgeto 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-datepicker.

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