# antuikit / TimePicker

> TimePicker, with `text` and `bare` variants. Removes the top margin antd puts on each panel column, so the panel's top inset matches its sides.

Docs: https://antuikit.com/docs/components/timepicker

## Install

npx antuikit@latest init
npx antuikit@latest add time-picker

## Import

import { TimePicker } from "@/components/ui/time-picker";

## Demos

- [Basic](https://ui.antuikit.com/embed/time-picker/basic.md): Pass `value` and `onChange` to control the picker, which opens a panel with hour, minute and second columns.
- [Sizes](https://ui.antuikit.com/embed/time-picker/sizes-variants-status.md): Set `size` to `large` or `small` to match the other fields in your form, with `medium` as the default.
- [Variants](https://ui.antuikit.com/embed/time-picker/variants.md): Set `variant` to `outlined`, `filled`, `text`, `underlined`, `borderless` or `bare`, the same six styles Input and Select use. `text` fills on hover and while focused, and `bare` draws nothing at all.
- [Status](https://ui.antuikit.com/embed/time-picker/status.md): Set `status` to `warning` or `error` to color the field's border when its value needs attention.
- [12-hour clock](https://ui.antuikit.com/embed/time-picker/twelve-hours.md): Set `use12Hours` with a matching `format` like `h:mm a` to add an AM/PM column, so the field and the panel agree.
- [Hours and minutes](https://ui.antuikit.com/embed/time-picker/hour-minute.md): Set `format` to `HH:mm` to leave out seconds, and the panel drops its seconds column to match.
- [Steps](https://ui.antuikit.com/embed/time-picker/steps.md): Set `hourStep`, `minuteStep` and `secondStep` to offer only every second hour, every 15 minutes and every 10 seconds.
- [Time range](https://ui.antuikit.com/embed/time-picker/range.md): Use `TimePicker.RangePicker` to pick a start and an end time in one field, with the two kept in order.
- [Overnight range](https://ui.antuikit.com/embed/time-picker/overnight-range.md): Set `order={false}` so an end before the start, like a shift from 22:00 to 06:00, stays as picked instead of being swapped.
- [Disabled times](https://ui.antuikit.com/embed/time-picker/disabled-time.md): Pass `disabledTime` to block hours and minutes, like everything outside 9:00 to 18:45 and any minute off the quarter hour.
- [Change on scroll](https://ui.antuikit.com/embed/time-picker/scroll-confirm.md): Set `changeOnScroll` to pick a value as soon as a column stops scrolling, with `needConfirm={false}` so no OK button is needed.
- [Extra footer](https://ui.antuikit.com/embed/time-picker/addon.md): Pass `renderExtraFooter` to add your own controls under the panel, like a suggested checkout time the guest can pick in one click.
- [In a form](https://ui.antuikit.com/embed/time-picker/in-form.md): Put a `TimePicker` in a `Form.Item` with a `required` rule, like a meeting time on a 15-minute grid.
- [Business hours](https://ui.antuikit.com/embed/time-picker/business-hours.md): A weekly opening-hours card with a range picker per day, a Closed switch, and a button that copies one day to all.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/time-picker`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `TimePicker` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.