Time pickerforms

Time field with typed entry and a slot list; HH:mm values, 24-hour by default and 12-hour when the locale uses it.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/time-picker

의존 아이템button date-input input locale style

Default

No time selected

time-picker-demo.tsx

"use client";
import * as React from "react";import type { TimeOfDay } from "@plott/webkit-time";import { TimePicker } from "@/components/ui/time-picker";
export default function TimePickerDemo() {  const [value, setValue] = React.useState<TimeOfDay | null>(null);  return (    <div className="flex flex-col gap-2">      <TimePicker aria-label="Check-in time" name="checkInTime" value={value} onValueChange={setValue} step={15} min="14:00" max="22:00" />      <p className="text-sm text-muted-foreground">{value ?? "No time selected"}</p>    </div>  );}