• Version 4.11.2
  • Published
  • 14.9 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 monthAriaLabelPrefix

                                                                                                                                                            monthAriaLabelPrefix?: string | 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 showIcon

                                                                                                                                                                                                                                    showIcon?: 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: (day: 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>