TimePicker is installed into your project as a file you own. It takes the same props as Ant Design's TimePicker, forwards a ref, and exports TimeRangePicker beside it. It adds no behavior and no styling.
TimePicker is DatePicker with picker="time", so most of the props in the table below are shared with DatePicker.
Install
npx antuikit@latest init
npx antuikit@latest add time-picker
The first command sets up your project once, with AntuikitProvider and the theme tokens. The second adds TimePicker.
Import
Import from @/components/ui/time-picker, not from antd. The file lives in your project, so the path is a project path.
import { TimePicker, TimeRangePicker } from "@/components/ui/time-picker"
The axes
The props that take a fixed set of values. The Design tab's Figma properties follow them. They work as on every other input.
variant: outlined (the default), borderless, filled, underlined. Inherited from ConfigProvider when not passed, so it is usually set once for the form.
status: error or warning. A Form sets it from validation. Set it by hand only outside a Form.
size: large, medium or small, also inherited from ConfigProvider.
placement takes the four corners the panel can open from. format also takes an object with type: "mask", which changes how the field handles typing.
Flags
Several of these have defaults that depend on other props, which is where the surprises are.
needConfirm defaults to true here and to false on DatePicker, so a pick commits on OK. An hour without a minute is not a time yet.
showNow is on for the single picker and off for TimeRangePicker.
use12Hours follows the format when left out. A format with a, A, LT, LLL or LTS adds the AM/PM column, so leaving the flag out is not the same as false.
inputReadOnly is turned on when format is a function or multiple is on, since neither can be parsed back from text.
showHour, showMinute and showSecond work together: with none set, all three are on, and setting one to true turns the other two off. Set all three or none.
allowClear is on by default and also takes an object ({ clearIcon }). hideDisabledOptions and changeOnScroll are off, and usually best left off. See the Usage and Accessibility tabs.
multiple is in the type but does not work on a time picker.
Slots
The props that take a node, where your own markup goes. Use them before a descendant selector, which cannot reach the panel in its portal.
prefix and suffixIcon in the field. The default suffix is a clock from your icon pack, set on AntuikitProvider. Pass suffixIcon to replace it.
allowClear.clearIcon replaces the clear icon and keeps the button around it, which carries the aria-label. Pass an icon, not a button.
renderExtraFooter puts content above the Now and OK buttons, inside the panel's footer part. addon is the deprecated name for it and warns in development.
cellRender replaces one column cell. info.subType says which column is asking (hour, minute, second, millisecond, meridiem), and info.today is the current time as a dayjs value.
panelRender wraps the whole panel, for a layout the classNames keys cannot reach.
separator and presets belong to TimeRangePicker alone.
The panel's arrows are drawn in CSS, not with icons, so the icon pack does not change them.
Events
Which one to listen to depends on needConfirm.
onChange fires when the value is committed: on OK, on Enter, and on the Tab that leaves the field. Its second argument is already formatted.
onCalendarChange fires on every click in the panel, confirmed or not, for a live preview beside the field. On TimeRangePicker, info.range says which end moved.
onOk fires from the footer button only, onClear from the clear button, and onOpenChange on every open and close, including the Escape that reverts.
onFocus and onBlur take a second argument whose range tells a range picker's two fields apart. onKeyDown runs after the picker has handled Tab and Escape.
Values are dayjs objects.value takes a dayjs, not a string, and format only changes what the field shows.
import dayjs from "dayjs";
<TimePicker
value={dayjs("09:30", "HH:mm")}
format="HH:mm"
onChange={(time, timeString) => save(timeString)}
/>
dayjs comes with antd, but add it to your own dependencies before you import it, or the import can fail under pnpm. A form that stores strings can use the second argument of onChange and skip dayjs.
TimeRangePicker
The second export is two fields sharing one panel and one commit. Its props differ from the single picker in a few places.
1
<TimeRangePicker
2
format="HH:mm"
3
order={false} // keeps 22:00 to 06:00 as picked
4
allowEmpty={[false, true]}
5
id={{ start: "opens", end: "closes" }}
6
disabledTime={(_, range, info) =>
7
range === "end" && info.from
8
? { disabledHours: () => hoursBefore(info.from) }
9
: {}
10
}
11
/>
Set order={false} for overnight ranges. RangePicker sorts the two values, so a shift from 22:00 to 06:00 becomes 06:00 to 22:00. Turn order off when a range can cross midnight.
disabledTime takes more arguments here: which field is asking, and info.from with the value already picked. That is where "the end must be after the start" goes.
id takes { start, end }, one per input. disabled and allowEmpty also take a pair.
No Now button by default. The separator between the fields is hidden from screen readers, but one you pass is read out.
The ref handle's focus takes an index here, so focus(1) puts the caret in the end field.
Styling
classNames and styles take the same keys, one per part. Use them before a descendant selector: a part with a key stays stable across versions.
1
<TimePicker
2
classNames={{
3
// The field.
4
root: "…",
5
prefix: "…",
6
input: "…",
7
suffix: "…",
8
// The panel, which takes an object of its own.
9
popup: {
10
root: "…",
11
container: "…",
12
content: "…",
13
item: "…", // one time cell
14
footer: "…",
15
},
16
}}
17
/>
A utility class on one of these keys wins without !important. Setting a component token's CSS variable on the root has no effect, so change the token in your theme or style the part instead.
API Reference
TimePicker
TimePicker's props. Rows marked antuikit in the Version column are added by the kit.
TimeRangePicker
TimeRangePicker's props where they differ from TimePicker's. Rows marked antuikit in the Version column are added by the kit.