react-datepicker

  • Version 7.3.0
  • Published
  • 2.04 MB
  • 5 dependencies
  • MIT license

Install

npm i react-datepicker
yarn add react-datepicker
pnpm add react-datepicker

Overview

A simple and reusable datepicker component for React

Index

Variables

variable CalendarContainer

const CalendarContainer: React.FC<CalendarContainerProps>;

    variable PRESELECT_CHANGE_VIA_INPUT

    const PRESELECT_CHANGE_VIA_INPUT: string;

      variable PRESELECT_CHANGE_VIA_NAVIGATE

      const PRESELECT_CHANGE_VIA_NAVIGATE: string;

        Functions

        function getDefaultLocale

        getDefaultLocale: () => string | undefined;
        • Gets the default locale.

          Returns

          - The default locale.

        function registerLocale

        registerLocale: (localeName: string, localeData: LocaleObj) => void;
        • Registers a locale.

          Parameter localeName

          The name of the locale.

          Parameter localeData

          The data of the locale.

        function setDefaultLocale

        setDefaultLocale: (localeName?: string) => void;
        • Sets the default locale.

          Parameter localeName

          The name of the locale.

        Classes

        class DatePicker

        class DatePicker extends Component<DatePickerProps, DatePickerState> {}

          constructor

          constructor(props: DatePickerProps);

            property calcInitialState

            calcInitialState: () => DatePickerState;

              property calendar

              calendar: any;

                property cancelFocusInput

                cancelFocusInput: () => void;

                  property clear

                  clear: () => void;

                    property clearPreventFocusTimeout

                    clearPreventFocusTimeout: () => void;

                      property defaultProps

                      static readonly defaultProps: {
                      allowSameDay: boolean;
                      dateFormat: string;
                      dateFormatCalendar: string;
                      onChange(): void;
                      disabled: boolean;
                      disabledKeyboardNavigation: boolean;
                      dropdownMode: 'scroll';
                      onFocus(): void;
                      onBlur(): void;
                      onKeyDown(): void;
                      onInputClick(): void;
                      onSelect(): void;
                      onClickOutside(): void;
                      onMonthChange(): void;
                      onCalendarOpen(): void;
                      onCalendarClose(): void;
                      preventOpenOnFocus: boolean;
                      onYearChange(): void;
                      onInputError(): void;
                      monthsShown: number;
                      readOnly: boolean;
                      withPortal: boolean;
                      selectsDisabledDaysInRange: boolean;
                      shouldCloseOnSelect: boolean;
                      showTimeSelect: boolean;
                      showTimeInput: boolean;
                      showPreviousMonths: boolean;
                      showMonthYearPicker: boolean;
                      showFullMonthYearPicker: boolean;
                      showTwoColumnMonthYearPicker: boolean;
                      showFourColumnMonthYearPicker: boolean;
                      showYearPicker: boolean;
                      showQuarterYearPicker: boolean;
                      showWeekPicker: boolean;
                      strictParsing: boolean;
                      swapRange: boolean;
                      timeIntervals: number;
                      timeCaption: string;
                      previousMonthAriaLabel: string;
                      previousMonthButtonLabel: string;
                      nextMonthAriaLabel: string;
                      nextMonthButtonLabel: string;
                      previousYearAriaLabel: string;
                      previousYearButtonLabel: string;
                      nextYearAriaLabel: string;
                      nextYearButtonLabel: string;
                      timeInputLabel: string;
                      enableTabLoop: boolean;
                      yearItemNumber: number;
                      focusSelectedMonth: boolean;
                      showPopperArrow: boolean;
                      excludeScrollbar: boolean;
                      customTimeInput: null;
                      calendarStartDay: undefined;
                      toggleCalendarOnIconClick: boolean;
                      usePointerEvent: boolean;
                      };

                        property deferFocusInput

                        deferFocusInput: () => void;

                          property getPreSelection

                          getPreSelection: () => Date;

                            property handleBlur

                            handleBlur: (event: React.FocusEvent<HTMLElement>) => void;

                              property handleCalendarClickOutside

                              handleCalendarClickOutside: (event: React.MouseEvent<HTMLElement>) => void;

                                property handleChange

                                handleChange: (
                                event?:
                                | React.MouseEvent<HTMLElement, MouseEvent>
                                | React.KeyboardEvent<HTMLElement>
                                | undefined
                                ) => void;

                                  property handleDropdownFocus

                                  handleDropdownFocus: () => void;

                                    property handleFocus

                                    handleFocus: (event: React.FocusEvent<HTMLElement>) => void;

                                      property handleSelect

                                      handleSelect: (
                                      date: Date,
                                      event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
                                      monthSelectedIn?: number
                                      ) => void;

                                        property handleTimeChange

                                        handleTimeChange: (time: Date) => void;

                                          property input

                                          input: HTMLElement;

                                            property inputFocusTimeout

                                            inputFocusTimeout: number;

                                              property inputOk

                                              inputOk: () => boolean;

                                                property isCalendarOpen

                                                isCalendarOpen: () => boolean;

                                                  property modifyHolidays

                                                  modifyHolidays: () => HolidayItem[] | undefined;

                                                    property onClearClick

                                                    onClearClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;

                                                      property onDayKeyDown

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

                                                        property onInputClick

                                                        onInputClick: () => void;

                                                          property onInputKeyDown

                                                          onInputKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;

                                                            property onPopperKeyDown

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

                                                              property onPortalKeyDown

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

                                                                property onScroll

                                                                onScroll: (event: Event) => void;

                                                                  property preventFocusTimeout

                                                                  preventFocusTimeout: number;

                                                                    property renderAriaLiveRegion

                                                                    renderAriaLiveRegion: () => React.JSX.Element;

                                                                      property renderCalendar

                                                                      renderCalendar: () => React.JSX.Element | null;

                                                                        property renderClearButton

                                                                        renderClearButton: () => JSX.Element | null;

                                                                          property renderDateInput

                                                                          renderDateInput: () => React.FunctionComponentElement<any>;

                                                                            property resetHiddenStatus

                                                                            resetHiddenStatus: () => void;

                                                                              property sendFocusBackToInput

                                                                              sendFocusBackToInput: () => void;

                                                                                property setBlur

                                                                                setBlur: () => void;

                                                                                  property setFocus

                                                                                  setFocus: () => void;

                                                                                    property setHiddenStateOnVisibilityHidden

                                                                                    setHiddenStateOnVisibilityHidden: () => void;

                                                                                      property setHiddenStatus

                                                                                      setHiddenStatus: () => void;

                                                                                        property setOpen

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

                                                                                          property setPreSelection

                                                                                          setPreSelection: (date?: Date | null) => void;

                                                                                            property setSelected

                                                                                            setSelected: (
                                                                                            date: Date | null,
                                                                                            event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
                                                                                            keepInput?: boolean,
                                                                                            monthSelectedIn?: number
                                                                                            ) => void;

                                                                                              property toggleCalendar

                                                                                              toggleCalendar: () => void;

                                                                                                method componentDidMount

                                                                                                componentDidMount: () => void;

                                                                                                  method componentDidUpdate

                                                                                                  componentDidUpdate: (
                                                                                                  prevProps: DatePickerProps,
                                                                                                  prevState: DatePickerState
                                                                                                  ) => void;

                                                                                                    method componentWillUnmount

                                                                                                    componentWillUnmount: () => void;

                                                                                                      method render

                                                                                                      render: () => JSX.Element | null;

                                                                                                        method renderInputContainer

                                                                                                        renderInputContainer: () => JSX.Element;

                                                                                                          Interfaces

                                                                                                          interface ReactDatePickerCustomHeaderProps

                                                                                                          interface ReactDatePickerCustomHeaderProps {}

                                                                                                            property changeMonth

                                                                                                            changeMonth: (month: number) => void;

                                                                                                              property changeYear

                                                                                                              changeYear: (year: number) => void;

                                                                                                                property customHeaderCount

                                                                                                                customHeaderCount: number;

                                                                                                                  property date

                                                                                                                  date: CalendarState['date'];

                                                                                                                    property decreaseMonth

                                                                                                                    decreaseMonth: VoidFunction;

                                                                                                                      property decreaseYear

                                                                                                                      decreaseYear: VoidFunction;

                                                                                                                        property increaseMonth

                                                                                                                        increaseMonth: VoidFunction;

                                                                                                                          property increaseYear

                                                                                                                          increaseYear: VoidFunction;

                                                                                                                            property monthDate

                                                                                                                            monthDate: Date;

                                                                                                                              property nextMonthButtonDisabled

                                                                                                                              nextMonthButtonDisabled: boolean;

                                                                                                                                property nextYearButtonDisabled

                                                                                                                                nextYearButtonDisabled: boolean;

                                                                                                                                  property prevMonthButtonDisabled

                                                                                                                                  prevMonthButtonDisabled: boolean;

                                                                                                                                    property prevYearButtonDisabled

                                                                                                                                    prevYearButtonDisabled: boolean;

                                                                                                                                      Type Aliases

                                                                                                                                      type DatePickerProps

                                                                                                                                      type DatePickerProps = Omit<
                                                                                                                                      CalendarProps,
                                                                                                                                      | 'setOpen'
                                                                                                                                      | 'dateFormat'
                                                                                                                                      | 'preSelection'
                                                                                                                                      | 'onSelect'
                                                                                                                                      | 'onClickOutside'
                                                                                                                                      | 'highlightDates'
                                                                                                                                      | 'holidays'
                                                                                                                                      | 'shouldFocusDayInline'
                                                                                                                                      | 'outsideClickIgnoreClass'
                                                                                                                                      | 'monthSelectedIn'
                                                                                                                                      | 'onDropdownFocus'
                                                                                                                                      | 'onTimeChange'
                                                                                                                                      | 'className'
                                                                                                                                      | 'container'
                                                                                                                                      | 'handleOnKeyDown'
                                                                                                                                      | 'handleOnDayKeyDown'
                                                                                                                                      | 'isInputFocused'
                                                                                                                                      | 'setPreSelection'
                                                                                                                                      | 'selectsRange'
                                                                                                                                      | 'selectsMultiple'
                                                                                                                                      | 'dropdownMode'
                                                                                                                                      > &
                                                                                                                                      Partial<Pick<AdditionalProps, 'excludeScrollbar'>> &
                                                                                                                                      Pick<CalendarIconProps, 'icon'> &
                                                                                                                                      Omit<PortalProps, 'children' | 'portalId'> &
                                                                                                                                      Omit<
                                                                                                                                      PopperComponentProps,
                                                                                                                                      | 'className'
                                                                                                                                      | 'hidePopper'
                                                                                                                                      | 'targetComponent'
                                                                                                                                      | 'popperComponent'
                                                                                                                                      | 'popperOnKeyDown'
                                                                                                                                      | 'showArrow'
                                                                                                                                      > & {
                                                                                                                                      dateFormatCalendar?: CalendarProps['dateFormat'];
                                                                                                                                      calendarClassName?: CalendarProps['className'];
                                                                                                                                      calendarContainer?: CalendarProps['container'];
                                                                                                                                      dropdownMode?: CalendarProps['dropdownMode'];
                                                                                                                                      onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;
                                                                                                                                      popperClassName?: PopperComponentProps['className'];
                                                                                                                                      showPopperArrow?: PopperComponentProps['showArrow'];
                                                                                                                                      open?: boolean;
                                                                                                                                      disabled?: boolean;
                                                                                                                                      readOnly?: boolean;
                                                                                                                                      startOpen?: boolean;
                                                                                                                                      onFocus?: React.FocusEventHandler<HTMLElement>;
                                                                                                                                      onBlur?: React.FocusEventHandler<HTMLElement>;
                                                                                                                                      onClickOutside?: React.MouseEventHandler<HTMLElement>;
                                                                                                                                      onInputClick?: VoidFunction;
                                                                                                                                      preventOpenOnFocus?: boolean;
                                                                                                                                      closeOnScroll?: boolean | ((event: Event) => boolean);
                                                                                                                                      isClearable?: boolean;
                                                                                                                                      clearButtonTitle?: string;
                                                                                                                                      clearButtonClassName?: string;
                                                                                                                                      ariaLabelClose?: string;
                                                                                                                                      className?: string;
                                                                                                                                      customInput?: Parameters<typeof cloneElement>[0];
                                                                                                                                      dateFormat?: string | string[];
                                                                                                                                      showDateSelect?: boolean;
                                                                                                                                      highlightDates?: (Date | HighlightDate)[];
                                                                                                                                      onCalendarOpen?: VoidFunction;
                                                                                                                                      onCalendarClose?: VoidFunction;
                                                                                                                                      strictParsing?: boolean;
                                                                                                                                      swapRange?: boolean;
                                                                                                                                      onInputError?: (error: { code: 1; msg: string }) => void;
                                                                                                                                      allowSameDay?: boolean;
                                                                                                                                      withPortal?: boolean;
                                                                                                                                      focusSelectedMonth?: boolean;
                                                                                                                                      showIcon?: boolean;
                                                                                                                                      calendarIconClassname?: never;
                                                                                                                                      calendarIconClassName?: string;
                                                                                                                                      toggleCalendarOnIconClick?: boolean;
                                                                                                                                      holidays?: Holiday[];
                                                                                                                                      startDate?: Date;
                                                                                                                                      selected?: Date | null;
                                                                                                                                      value?: string;
                                                                                                                                      customInputRef?: string;
                                                                                                                                      id?: string;
                                                                                                                                      name?: string;
                                                                                                                                      form?: string;
                                                                                                                                      autoFocus?: boolean;
                                                                                                                                      placeholderText?: string;
                                                                                                                                      autoComplete?: string;
                                                                                                                                      title?: string;
                                                                                                                                      required?: boolean;
                                                                                                                                      tabIndex?: number;
                                                                                                                                      ariaDescribedBy?: string;
                                                                                                                                      ariaInvalid?: string;
                                                                                                                                      ariaLabelledBy?: string;
                                                                                                                                      ariaRequired?: string;
                                                                                                                                      onChangeRaw?: (
                                                                                                                                      event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>
                                                                                                                                      ) => void;
                                                                                                                                      onSelect?: (
                                                                                                                                      date: Date | null,
                                                                                                                                      event?:
                                                                                                                                      | React.MouseEvent<HTMLElement, MouseEvent>
                                                                                                                                      | React.KeyboardEvent<HTMLElement>
                                                                                                                                      ) => void;
                                                                                                                                      } & (
                                                                                                                                      | {
                                                                                                                                      selectsRange?: never;
                                                                                                                                      selectsMultiple?: never;
                                                                                                                                      onChange?: (
                                                                                                                                      date: Date | null,
                                                                                                                                      event?:
                                                                                                                                      | React.MouseEvent<HTMLElement>
                                                                                                                                      | React.KeyboardEvent<HTMLElement>
                                                                                                                                      ) => void;
                                                                                                                                      }
                                                                                                                                      | {
                                                                                                                                      selectsRange: true;
                                                                                                                                      selectsMultiple?: never;
                                                                                                                                      onChange?: (
                                                                                                                                      date: [Date | null, Date | null],
                                                                                                                                      event?:
                                                                                                                                      | React.MouseEvent<HTMLElement>
                                                                                                                                      | React.KeyboardEvent<HTMLElement>
                                                                                                                                      ) => void;
                                                                                                                                      }
                                                                                                                                      | {
                                                                                                                                      selectsRange?: never;
                                                                                                                                      selectsMultiple: true;
                                                                                                                                      onChange?: (
                                                                                                                                      date: Date[] | null,
                                                                                                                                      event?:
                                                                                                                                      | React.MouseEvent<HTMLElement>
                                                                                                                                      | React.KeyboardEvent<HTMLElement>
                                                                                                                                      ) => void;
                                                                                                                                      }
                                                                                                                                      );

                                                                                                                                        Package Files (4)

                                                                                                                                        Dependencies (5)

                                                                                                                                        Dev Dependencies (52)

                                                                                                                                        Peer Dependencies (2)

                                                                                                                                        Badge

                                                                                                                                        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/react-datepicker.

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