Time Picker

By clicking the input box, you can select a time from a popup panel.

Select Time

Usage

Example Code

1import { TimePicker } from "inc-design-system/timePicker";

Example Code

1const [timeValue, setTimeValue] = React.useState(new Date());
2
3return (
4    <div>
5        <h1>Select Time</h1>
6        <TimePicker
7            timeValue={timeValue}
8            onTimeChange={setTimeValue}
9            size="md"
10            twelveHour={true}
11            hourMinuteOnly={false}
12            suppressHydrationWarning={true}
13        />
14    </div>
15);

Props

TimePicker

Prop	Type	Description	Default
timeValue	Date	The current time selected. If undefined, the picker defaults to the current time.	-
onTimeChange	(newTime: Date) => void	A callback function that is called when the user selects a new time. It receives the new Date object as its argument.	-
size	'sm' \| 'md' \| 'lg'	Specifies the size of the time picker. Options include sm for small, md for medium, and lg for large. Default is md.	'md'
hourMinuteOnly	boolean	If true, the picker will only display hours and minutes (no seconds). Default is false.	false
twelveHour	boolean	If true, the time picker will use a 12-hour format with AM/PM selectors. If false, it uses a 24-hour format. Default is false.	false
disabled	boolean	If true, the time picker will be disabled and not interactable. Default is false.	false
suppressHydrationWarning	boolean	If true, suppresses the hydration warning that Next.js might throw when using dynamic imports with React components.	true