How to Use a React Time Picker Component 

When I first started building React apps for clients in the U.S., one of the most common UI elements I needed was a time picker, especially for scheduling appointments, meetings, and delivery slots.

Over the years, I’ve tried several different approaches to integrate time pickers in React. Some were quick to set up but lacked flexibility, while others offered deep customization but required more setup.

In this tutorial, I’ll show you two simple ways to add a React Time Picker component to your app, one using the popular react-time-picker library and another using Material UI (MUI). Both are beginner-friendly and production-ready.

What is a React Time Picker?

A time picker is a user interface component that allows users to select a specific time instead of typing it manually.

For example, if you’re building a restaurant reservation system or a doctor appointment scheduler, you can use a time picker to let users choose their preferred time slot easily.

Method 1 – Use the react-time-picker Library

This is one of the easiest methods I’ve used to add a time picker in React. The react-time-picker library is lightweight, easy to install, and works seamlessly with both controlled and uncontrolled components.

Step 1: Install the Library

Open your terminal in your React project folder and run:

npm install react-time-picker

Or if you use Yarn:

yarn add react-time-picker

Step 2: Import and Use the Component

Here’s a complete example showing how you can use the time picker in a simple scheduling form:

// App.js
import React, { useState } from "react";
import TimePicker from "react-time-picker";
import "react-time-picker/dist/TimePicker.css";
import "react-clock/dist/Clock.css";

function App() {
  const [time, setTime] = useState("10:00");

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`You selected ${time} for your appointment.`);
  };

  return (
    <div style={{ margin: "50px auto", maxWidth: "400px" }}>
      <h2>Book Your Appointment</h2>
      <form onSubmit={handleSubmit}>
        <label style={{ display: "block", marginBottom: "10px" }}>
          Select Time:
        </label>
        <TimePicker
          onChange={setTime}
          value={time}
          disableClock={true}
          clearIcon={null}
        />
        <button
          type="submit"
          style={{
            marginTop: "20px",
            padding: "10px 20px",
            backgroundColor: "#007BFF",
            color: "#fff",
            border: "none",
            borderRadius: "4px",
            cursor: "pointer",
          }}
        >
          Confirm
        </button>
      </form>
    </div>
  );
}

export default App;

Step 3: Run the App

Start your React app:

npm start

You can see the output in the screenshot below.

Now, you’ll see a simple time picker where you can select a time (for example, 2:30 PM) and submit it.

• Quick Setup: You can add it in minutes.
• Customizable: You can disable the clock, change icons, or control time formats (12-hour or 24-hour).
• Lightweight: It doesn’t add much overhead to your app.

Method 2 – Use Material UI (MUI) Time Picker

If you’re already using Material UI in your project, the MUI Time Picker is a great choice. It follows Google’s Material Design and looks modern out of the box.

Step 1: Install Required Packages

Run the following command:

npm install @mui/x-date-pickers @mui/material @emotion/react @emotion/styled @mui/icons-material dayjs

Step 2: Import and Use the MUI Time Picker

Here’s a complete working example:

// App.js
import * as React from "react";
import TextField from "@mui/material/TextField";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { TimePicker } from "@mui/x-date-pickers/TimePicker";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import Button from "@mui/material/Button";
import dayjs from "dayjs";

export default function App() {
  const [selectedTime, setSelectedTime] = React.useState(dayjs("2025-11-14T09:00"));

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Meeting scheduled at ${selectedTime.format("hh:mm A")}`);
  };

  return (
    <div style={{ maxWidth: "400px", margin: "50px auto" }}>
      <h2>Schedule a Meeting</h2>
      <form onSubmit={handleSubmit}>
        <LocalizationProvider dateAdapter={AdapterDayjs}>
          <TimePicker
            label="Select Time"
            value={selectedTime}
            onChange={(newValue) => setSelectedTime(newValue)}
            renderInput={(params) => <TextField {...params} fullWidth />}
          />
        </LocalizationProvider>
        <Button
          variant="contained"
          color="primary"
          type="submit"
          style={{ marginTop: "20px" }}
        >
          Schedule
        </Button>
      </form>
    </div>
  );
}

Step 3: Run the App

Start your app again with:

npm start

You can see the output in the screenshot below.

You’ll now see a sleek Material Design time picker. You can choose a time and click the button to confirm.

• Professional Look: Perfect for client-facing dashboards and enterprise apps.
• Timezone and Localization Support: Works well for U.S. time zones and international formats.
• Great Integration: If you already use Material UI, it fits right in.

Bonus Tip – Handle Time Zones in the U.S.

If your users are across multiple U.S. time zones (like Eastern, Central, Mountain, and Pacific), you can use the dayjs-timezone plugin to handle conversions easily:

npm install dayjs-timezone

Then in your code:

import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import timezone from "dayjs/plugin/timezone";

dayjs.extend(utc);
dayjs.extend(timezone);

const timeInNY = dayjs().tz("America/New_York").format("hh:mm A");
console.log("Current time in New York:", timeInNY);

This is especially useful if you’re building apps for nationwide services like delivery scheduling or customer support.

Common Customization Options

Both libraries support useful props for customization:

Which Method Should You Choose?

If you want something quick and minimal, go with react-time-picker. If you already use Material UI or need a more polished UI, use the MUI Time Picker.

In my projects for U.S.-based clients, I often start with react-time-picker for MVPs, then switch to MUI for production apps.

When you integrate a React Time Picker the right way, it not only improves user experience but also reduces input errors significantly. Whether you’re building a scheduling system, booking app, or internal dashboard, these two methods will help you get started quickly and professionally.

You may like to read:

• Build a React Chat UI Component
• React Component Refactoring Best Practice
• Pass Parameters to Components in React
• Build a Dynamic Star Rating Component in React

Bijay Kumar

I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.

enjoysharepoint.com/