ReactJs Time-Picker

Syntax

<TimePicker
  value={selectedTime}
  onChange={handleTimeChange}
  format={24}
/>

Example

import React, { useState } from 'react';
import TimePicker from 'react-time-picker';

function TimePickerExample() {
  const [selectedTime, setSelectedTime] = useState('10:00');

  const handleTimeChange = time => {
    setSelectedTime(time);
  };

  return (
    <div>
      <h1>React TimePicker Example</h1>
      <TimePicker
        value={selectedTime}
        onChange={handleTimeChange}
        format={24}
      />
      <p>Selected time: {selectedTime}</p>
    </div>
  );
}

export default TimePickerExample;

Output

Explanation

The ReactJs TimePicker component is a UI element used to select a time value. It allows the user to choose a time from a dropdown menu or using keyboard input, and returns the selected time in a 24-hour format (by default).

Props:

• value: (string, required) The currently selected time in the format "HH:mm".
• onChange: (function, required) A function to be called when the user changes the selected time. Receives the selected time as a string in "HH:mm" format as the first argument.
• format: (number, optional) The format of the time value to be returned. Can be either 12 or 24. Defaults to 24.

Use

The ReactJs TimePicker can be used in various scenarios such as booking systems, appointment scheduling, time tracking, etc. It is a useful UI element that allows users to easily select a specific time value.

To use the TimePicker component in your React application, you will need to install it using npm or yarn. Once installed, you can import it and use it in your code as shown in the example above.

Important Points

• The TimePicker component is a controlled component, which means that its value is controlled by the parent component.
• The value prop should always be provided to the component to determine the currently selected time.
• The onChange prop is required to handle changes to the selected time value.
• The format prop allows you to customize the time format that is returned by the component.

Summary

The ReactJs TimePicker component is a useful UI element for selecting time values. It is a controlled component that requires the value and onChange props to be set to function correctly. The format prop can be used to customize the time format that is returned by the component.