How to Create a Time Picker in ReactJS ?

ReactJS is a popular JavaScript library for building user interfaces. It provides developers with a flexible and efficient way to create interactive web applications. Time pickers are commonly used in applications where users need to select a specific time slot for booking appointments, scheduling events, or reserving resources. A time picker allows users to easily select the desired time and ensures accurate time allocation. In this article, we will create a time picker in steps using reactjs.

Setting Up the React App

First, let's set up a new React application using Create React App. Open your terminal and run the following command:

Example

The below code will create a new folder named "time−picker" with all the necessary files and dependencies.

npx create-react-app time-picker

Method 1:Using react−time−picker library

The react−time−picker library provides a simple and customizable time picker component. It offers various configuration options to adjust the appearance and behavior of the time picker.

Example

First, let's install the react−time−picker library using npm:

npm install react-time-picker

In the below example, We import the necessary dependencies, including React and the TimePicker component from the react−time−picker library. Inside the TimePickerComponent function component, we define a state variable time using the useState hook, initialized with the current date and time. We define a handleTimeChange function that updates the time state whenever the selected time changes. In the JSX code, we render the TimePicker component, passing the handleTimeChange function as the onChange prop and the time state as the value prop.

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

function TimePickerComponent() {
  const [time, setTime] = useState(new Date());

  const handleTimeChange = (newTime) => {
    setTime(newTime);
  };

  return (
    <div>
      <h1>React Time Picker Example</h1>
      <TimePicker
        onChange={handleTimeChange}
        value={time}
      />
    </div>
  );
}

export default TimePickerComponent;

Output

Method 2:Using the react−datetime librar

The react−datetime library provides a highly customizable date and time picker component. It offers various formatting and configuration options to fulfill the time picker to specific needs.

Example

To use the react−datetime library, we need to install it using npm:

npm install react-datetime

In the below code, after installing the react−datetime library, we import the required dependencies, including React, Datetime component, and the corresponding CSS file.

Inside the TimePickerComponent function component, we define a state variable time using the useState hook, initialized as an empty string. We define a handleTimeChange function that receives a moment object and updates the time state by formatting the moment object to the desired time format. In the JSX code, we render the Datetime component, passing the handleTimeChange function as the onChange prop, the time state as the value prop, and additional configurations like dateFormat and inputProps for customization.

import React, { useState } from 'react';
import Datetime from 'react-datetime';
import 'react-datetime/css/react-datetime.css';

function TimePickerComponent() {
  const [time, setTime] = useState('');

  const handleTimeChange = (momentObj) => {
    setTime(momentObj.format('HH:mm'));
  };

  return (
    <div>
      <h1>React Datetime Example</h1>
      <Datetime
        onChange={handleTimeChange}
        value={time}
        dateFormat={false}
        inputProps={{ placeholder: 'Select time' }}
      />
    </div>
  );
}

export default TimePickerComponent;

Output

Method 3:Using the react−time−range−picker library

The react−time−range−picker library provides a comprehensive solution for selecting time ranges. It allows users to choose both start and end times and provides visual feedback for the selected range.

Example

To use the react−time−range−picker library, we need to install it using npm:

npm install react-time-range-picker

In the below example, After installing the react−time−range−picker library, we import the necessary dependencies, including React, TimeRangePicker component, and the corresponding CSS file. Inside the TimePickerComponent function component, we define a state variable timeRange using the useState hook, initialized with a default start and end time.

We define a handleTimeChange function that updates the timeRange state whenever the selected time range changes. In the JSX code, we render the TimeRangePicker component, passing the handleTimeChange function as the onChange prop and the timeRange state as the value prop.

import React, { useState } from 'react';
import TimeRangePicker from 'react-time-range-picker';
import 'react-time-range-picker/dist/styles.css';

function TimePickerComponent() {
  const [timeRange, setTimeRange] = useState({
    start: '09:00',
    end: '17:00',
  });

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

  return (
    <div>
      <h1>React Time Range Picker Example</h1>
      <TimeRangePicker
        onChange={handleTimeChange}
        value={timeRange}
      />
    </div>
  );
}

export default TimePickerComponent;

Output

Conclusion

In this article, we discussed how we can create a time picker in Reactjs. We utilized the react−time−picker, react−datetime, and react−time−range−picker libraries, each offering unique features and advantages. By following the provided code examples, you can create highly customizable time pickers to suit various use cases. Additionally, we discussed how to enhance the user experience by adding CSS styling to the time picker components, making them more visually appealing and user−friendly.