DOCSEARCHbyAlgolia
Submit Docs

react-datetime-picker

repository·main·Indexed 20 days ago

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

A customizable datetime picker component for React applications that supports multiple languages and does not require moment.js. It features a DateTimePicker component with configurable props for value handling, formatting via Unicode Technical Standard #35, and control over calendar and clock widgets.

Tokens
1.3K
Snippets
4
Records
7
Agent score
68%

What's inside react-datetime-picker

  1. Control widget opening and closing behavior

    main

    You can intercept the opening and closing of the calendar and clock widgets using the following lifecycle props. These are useful for implementing custom logic (e.g., preventing closing when clicking specific elements).

    • shouldOpenWidgets: A function called before a widget opens. Receives { reason: OpenReason, widget: 'calendar' | 'clock' }. Return false to prevent opening.
    • shouldCloseWidgets: A function called before a widget closes. Receives { reason: CloseReason, widget: 'calendar' | 'clock' }. Return false to prevent closing.
    • onCalendarOpen / onCalendarClose: Callbacks triggered when the calendar opens or closes.
    • onClockOpen / onClockClose: Callbacks triggered when the clock opens or closes.

    Reasons for opening/closing include:

    • buttonClick (clicking the toggle button)
    • escape (pressing the Escape key)
    • outsideAction (clicking outside the picker)
    • select (selecting a value)
    • focus (focusing an input field)

  2. Use the DateTimePicker component

    main

    The primary entry point for the library is the DateTimePicker component. It can be imported as a default export or a named export. You can customize its behavior and appearance using the DateTimePickerProps type.

    import DateTimePicker from 'react-datetime-picker';
// or
import { DateTimePicker } from 'react-datetime-picker';

function MyComponent() {
  return <DateTimePicker />;
}

  3. DateTime Picker Utility Types

    main

    The following types are used for internal configuration and styling:

    • AmPmType: Represents the meridiem period ('am' or 'pm').
    • Detail: Specifies the granularity of time ('hour', 'minute', or 'second').
    • ClassName: A type for CSS class names, accepting a string, null, undefined, or an array of these values.
    export type AmPmType = 'am' | 'pm';
export type Detail = 'hour' | 'minute' | 'second';
export type ClassName = string | null | undefined | (string | null | undefined)[];

  5. Configure DateTimePicker props

    main

    The DateTimePicker component accepts a wide range of props to control its behavior, appearance, and accessibility.

    Core Props

    • value: The current selected date/time. Accepts a Date, null, or a string (ISO format). If an array is passed, only the first value is used.
    • onChange: Callback function triggered when a valid datetime is picked. Receives the new Value.
    • format: Input format based on Unicode Technical Standard #35. Supported tokens: y, M, MM, MMM, MMMM, d, dd, H, HH, h, hh, m, mm, s, ss, a.
    • locale: IETF language tag (e.g., 'en-US', 'hu-HU') used for the picker and calendar.
    • disabled: If true, the picker is disabled.
    • required: If true, the input is marked as required.

    Widget Control

    • disableCalendar: Removes the calendar and the toggle button.
    • disableClock: Removes the clock widget.
    • maxDetail: The most detailed view shown in the calendar (e.g., 'hour', 'minute', or 'second'). Defaults to 'minute'.
    • isCalendarOpen / isClockOpen: Controlled state for opening/closing widgets.
    • portalContainer: An HTMLElement where the calendar and clock widgets will be rendered using a React Portal.

    Customization & Accessibility

    • calendarIcon / clearIcon: Custom content (React element, component, or function) for the calendar and clear buttons. Pass null to hide them.
    • calendarProps: Props passed directly to the underlying react-calendar component.
    • clockProps: Props passed directly to the underlying react-clock component.
    • className: Additional CSS classes added to the main wrapper.
    • aria-label props: amPmAriaLabel, calendarAriaLabel, clearAriaLabel, dayAriaLabel, hourAriaLabel, minuteAriaLabel, monthAriaLabel, nativeInputAriaLabel, secondAriaLabel, yearAriaLabel.

  6. DateTime Picker Value Types

    main

    The react-datetime-picker uses specific types to represent the selected date and time. The primary Value type is a Date object or null. For more flexible or complex data handling, the library also supports LooseValue which can be a single piece (string, Date, or null) or a Range of such pieces.

    export type Value = Date | null;

export type LooseValuePiece = string | Date | null;
export type LooseValue = LooseValuePiece | Range<LooseValuePiece>;