{"id":114091,"date":"2023-06-27T09:00:32","date_gmt":"2023-06-27T03:30:32","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=114091"},"modified":"2023-06-27T11:29:08","modified_gmt":"2023-06-27T05:59:08","slug":"react-time-picker","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/react-time-picker\/","title":{"rendered":"React Time Picker"},"content":{"rendered":"

A time picker is a common user interface component that allows users to select a specific time of day. In this article, we’ll explore how to create a time picker component in React.<\/p>\n

Setting Up the React Application<\/h3>\n

To get started, we’ll create a new React application using create-react-app. If you already have a React application, you can skip this step.<\/p>\n

npx create-react-app time-picker-example\r\ncd time-picker-example<\/pre>\n
Next, we’ll install the react-time-picker package:<\/p>\n
npm install react-time-picker<\/pre>\n
Creating React Time Picker Component<\/h3>\n
Now that we have our React application setup and the react-time-picker package installed, let’s create a time picker component.<\/p>\n
We’ll start by creating a new file called TimePicker.js in the src folder. This file will contain our TimePicker component.<\/p>\n
import React, { useState } from 'react';\r\nimport TimePicker from 'react-time-picker';\r\n\r\nfunction TimePickerComponent() {\r\nconst [time, setTime] = useState('10:00');\r\n\r\nconst handleChange = (newTime) => {\r\nsetTime(newTime);\r\n};\r\n\r\nreturn (\r\n<div>\r\n<h1>Selected Time: {time}<\/h1>\r\n<TimePicker\r\nonChange={handleChange}\r\nvalue={time}\r\n\/>\r\n<\/div>\r\n);\r\n}\r\nexport default TimePickerComponent;<\/pre>\n
Let’s break down this code:<\/strong><\/p>\n