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.
Steps to add time picker in React
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.
1 | 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.
1 | 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | 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 className="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'))} /> </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.
That’s it for today.
Thank you for reading. Happy Coding..!!
