react-datepicker

react-datepicker

Version 8.7.0
Published 2 days ago
2.85 MB
3 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: Calendar;

property cancelFocusInput

cancelFocusInput: () => void;

property clear

clear: () => void;

property clearPreventFocusTimeout

clearPreventFocusTimeout: () => void;

property defaultProps

static readonly defaultProps: {
    allowSameDay: boolean;
    dateFormat: string;
    dateFormatCalendar: string;
    disabled: boolean;
    disabledKeyboardNavigation: boolean;
    dropdownMode: 'scroll';
    preventOpenOnFocus: boolean;
    monthsShown: number;
    outsideClickIgnoreClass: string;
    readOnly: boolean;
    rangeSeparator: string;
    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 deferBlur

deferBlur: () => void;

property deferFocusInput

deferFocusInput: () => void;

property getInputValue

getInputValue: () => string;

property getPreSelection

getPreSelection: () => Date;

property handleBlur

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

property handleCalendarClickOutside

handleCalendarClickOutside: (event: MouseEvent) => void;

property handleChange

handleChange: (event?: any) => 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: () => React.ReactElement | null;

property renderDateInput

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

property resetHiddenStatus

resetHiddenStatus: () => void;

property resetInputValue

resetInputValue: () => 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: () => React.ReactElement | null;

method renderInputContainer

renderInputContainer: () => React.ReactElement;

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;

property visibleYearsRange

visibleYearsRange?: {
    startYear: number;
    endYear: number;
};

Type Aliases

type DatePickerProps

type DatePickerProps = OmitUnion<
    CalendarProps,
    | 'setOpen'
    | 'dateFormat'
    | 'preSelection'
    | 'onSelect'
    | 'onClickOutside'
    | 'highlightDates'
    | 'holidays'
    | 'shouldFocusDayInline'
    | 'monthSelectedIn'
    | 'onDropdownFocus'
    | 'onTimeChange'
    | 'className'
    | 'container'
    | 'handleOnKeyDown'
    | 'handleOnDayKeyDown'
    | 'isInputFocused'
    | 'setPreSelection'
    | 'selectsRange'
    | 'selectsMultiple'
    | 'dropdownMode'
> &
    Partial<Pick<CalendarIconProps, 'icon'>> &
    OmitUnion<PortalProps, 'children' | 'portalId'> &
    OmitUnion<
        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?: ClickOutsideHandler;
        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 | null;
        endDate?: Date | null;
        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;
        rangeSeparator?: 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 (3)

Dev Dependencies (59)

Peer Dependencies (2)

Badge

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

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/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>

Updated 2 days ago.
Package analyzed in 5471 ms.
Missing or incorrect documentation? Open an issue for this package.

react-datepicker

Install

Overview

Index

Variables

Functions

Classes

Interfaces

Type Aliases

Variables

variable CalendarContainer

variable PRESELECT_CHANGE_VIA_INPUT

variable PRESELECT_CHANGE_VIA_NAVIGATE

Functions

function getDefaultLocale

Returns

function registerLocale

Parameter localeName

Parameter localeData

function setDefaultLocale

Parameter localeName

Classes

class DatePicker

constructor

property calcInitialState

property calendar

property cancelFocusInput

property clear

property clearPreventFocusTimeout

property defaultProps

property deferBlur

property deferFocusInput

property getInputValue

property getPreSelection

property handleBlur

property handleCalendarClickOutside

property handleChange

property handleDropdownFocus

property handleFocus

property handleSelect

property handleTimeChange

property input

property inputFocusTimeout

property inputOk

property isCalendarOpen

property modifyHolidays

property onClearClick

property onDayKeyDown

property onInputClick

property onInputKeyDown

property onPopperKeyDown

property onPortalKeyDown

property onScroll

property preventFocusTimeout

property renderAriaLiveRegion

property renderCalendar

property renderClearButton

property renderDateInput

property resetHiddenStatus

property resetInputValue

property sendFocusBackToInput

property setBlur

property setFocus

property setHiddenStateOnVisibilityHidden

property setHiddenStatus

property setOpen

property setPreSelection

property setSelected

property toggleCalendar

method componentDidMount

method componentDidUpdate

method componentWillUnmount

method render

method renderInputContainer

Interfaces

interface ReactDatePickerCustomHeaderProps

property changeMonth

property changeYear

property customHeaderCount

property date