DOCSEARCHbyAlgolia
Submit Docs

react-date-picker

repository·main·Indexed 23 days ago

https://github.com/wojtekmaj/react-date-picker

A flexible date picker component for React applications that supports picking days, months, years, and decades without requiring moment.js. It features a DatePicker component with customizable props for value handling, calendar control, localization via IETF language tags, and accessibility. The library includes TypeScript support via DatePickerProps and utility functions like formatMonth and formatShortMonth for locale-aware date formatting.

Tokens
996
Snippets
0
Records
7
Agent score
30%

What's inside react-date-picker

  1. Control calendar opening and closing logic

    main

    Instead of using the boolean closeCalendar prop, it is recommended to use the shouldOpenCalendar and shouldCloseCalendar functions for fine-grained control over the calendar lifecycle.

    These functions receive a reason object, allowing you to decide whether to allow the action based on how it was triggered.

    Close Reasons (CloseReason):

    • 'buttonClick': User clicked the calendar toggle button.
    • 'escape': User pressed the Escape key.
    • 'outsideAction': User clicked or touched outside the component.
    • 'select': User selected a date.

    Open Reasons (OpenReason):

    • 'buttonClick': User clicked the calendar toggle button.
    • 'focus': User focused the input field.

  5. Configure DatePickerProps

    main

    The DatePicker component accepts several props to customize its appearance and behavior. Key categories include:

    Value and Change

    • value: The current date value. Accepts Date, an array of dates (for ranges), or date strings.
    • onChange: Callback function called when a user picks a valid date. Receives the new Value.
    • onInvalidChange: Callback called when the user picks an invalid date.
    • returnValue: Determines what is passed to onChange. Can be 'start', 'end', or 'range' (returns an array). Defaults to 'start'.

    Calendar Control

    • isOpen: Controls whether the calendar is visible. Defaults to false.
    • disableCalendar: If true, removes the calendar and the toggle button.
    • maxDetail: The most detailed view shown in the calendar ('month', 'year', 'decade', or 'century'). Defaults to 'month'.
    • minDate / maxDate: Constraints for the selectable date range.
    • calendarProps: Object containing props to pass directly to the underlying React-Calendar component.
    • portalContainer: An HTMLElement to render the calendar into using a React Portal.

    Appearance and Accessibility

    • format: Input format string based on Unicode Technical Standard #35 (e.g., 'y-MM-dd'). Useful for SSR hydration consistency.
    • locale: IETF language tag for localization (e.g., 'en-US').
    • showLeadingZeros: Boolean to enable/disable leading zeros in inputs. Defaults to false.
    • calendarIcon / clearIcon: Custom icons or render functions for the calendar and clear buttons. Passing null hides the respective button.
    • className: Additional CSS classes applied to the main wrapper.
    • disabled: Disables the entire date picker.

    Event Callbacks

    • onCalendarOpen / onCalendarClose: Called when the calendar visibility changes.
    • shouldOpenCalendar: Function (props: { reason: OpenReason }) => boolean to intercept and prevent the calendar from opening.
    • shouldCloseCalendar: Function (props: { reason: CloseReason }) => boolean to intercept and prevent the calendar from closing.
    • onFocus: Called when the input is focused.