Skip to content
timepicker-ui
React · Basic

24h Format

Use 24-hour clock format instead of 12-hour with AM/PM

24-Hour Clock

Configure timepicker to use 24-hour format:

24h Format

Hours from 00 to 23

index.tsxtsx
1import { Timepicker } from "timepicker-ui-react";
2

3function App() {
4  return (
5    <Timepicker
6      placeholder="Select time (24h)"
7      options={{
8        clock: { type: "24h" }
9      }}
10    />
11  );
12}

With Auto-Switch

Automatically switch to minutes after selecting hour:

Auto-Switch to Minutes

Improves user experience

index.tsxtsx
1import { Timepicker } from "timepicker-ui-react";
2

3function App() {
4  return (
5    <Timepicker
6      options={{
7        clock: {
8          type: "24h",
9          autoSwitchToMinutes: true
10        }
11      }}
12    />
13  );
14}