• Version 4.19.3
  • Published
  • 13.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 calendarIconClassname

                                                                                calendarIconClassname?: 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 icon

                                                                                                                                      icon?: string | React.ReactElement;

                                                                                                                                        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 renderMonthContent

                                                                                                                                                                                                                                                                                                                                                          renderMonthContent: (
                                                                                                                                                                                                                                                                                                                                                          monthIndex: number,
                                                                                                                                                                                                                                                                                                                                                          shortMonthText: string,
                                                                                                                                                                                                                                                                                                                                                          fullMonthText: string
                                                                                                                                                                                                                                                                                                                                                          ) => 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>