react-time-picker-next

A simple time picker which supports both 12 and 24 hour formats.

This is a light weight and simple time picker which can be styled easily.

Install

npm install react-time-picker-next --save

Compatibility

Compatible with React versions ^16.0.0, ^17.0.0 and ^18.0.0.

Usage

1. Include Time Picker

Node:

import TimePicker from 'react-time-picker-next'

2. Add the custom component to the destination

<TimePicker
    format="12" // Either "12" or "24"
    value="18:30"
    onChange={(e) => {
        console.log(e); // output => {time: '06:30 PM', timeISO: '18:30'}
    }}
></TimePicker>

3. Handle and notify error situation

<TimePicker
    format="12" // Either "12" or "24"
    value=""
    error={{}} // Will highlight the input in red, {null} or remove the prop to revert
    onChange={(e) => {
        console.log(e); // output => {time: '06:30 PM', timeISO: '18:30'}
    }}
></TimePicker>

4. Add the browser time picker component to the destination (If you dont need cutom time picker)

<TimePicker
    useBrowserPicker={true} // This will enable the built in browser time picker(for already installed users)
    value="18:30"
    onChange={(e) => {
        console.log(e); // output => event param object
    }}
></TimePicker>

5. Open/close time picker menu on custom event

const [openMenu, setOpenMenu] = useState(false);

<TimePicker    
    openMenu={openMenu}
></TimePicker>

6. Style the component using these props You can provide additional styling using these props

disabled - Disables the component

containerClassName - Outermost container div.

inputClassName - Input textbox.

menuClassName - Container for the menu.