How to implement time picker in React

Today we’ll show you how to implement time picker in React. We have written an article where we showed you how to add DateTimePicker in ReactJS.

In this article we will give you an example to add time picker only in ReactJS and for that we have to install the npm package.

1. Create react application

Let’s create a simple react application using the `create-react-app` package. Run the following command to create a react application.

npx create-react-app react-time-picker

2. Install npm dependency

Now, we have to install the npm dependency for react timepicker. Run the following command to add rc-time-picker.

npm i rc-time-picker

3. Implement time picker

To integrate time picker in the react app, we have to import the time picker and style sheet from the package itself. Check the following code to add a time picker in the component.

import React, { useState } from "react";
import TimePicker from "rc-time-picker";
import 'rc-time-picker/assets/index.css';

function App() {
  const [time, setTime] = useState('');
  return (
    <div class="App">
      React Time Picker - <a href="https://www.cluemediator.com/" target="_blank" rel="noopener noreferrer">Clue Mediator</a>
      <br>
      <p>Selected Time: {time || '-'}</p>
      <timepicker placeholder="Select Time" use12hours="" showsecond={false} focusonopen={true} format="hh:mm A" onchange="{e" ==""> setTime(e.format('LT'))}
      />
    </timepicker></div>
  );
}

export default App;

We have added a few more properties such as `use12Hours`, `showSeconds`, etc. You can check out this link for more information about some of the other properties.

4. Output

Let’s run the application and check in the browser.

Output - How to implement time picker in React - Clue Mediator

That’s it for today.
Thank you for reading. Happy Coding..!!

Demo & Source Code

Github Repository StackBlitz Project