TimePicker

pnpm dlx shadcn@latest add @whereui/time-picker

import { TimePicker } from "@/components/ui/time-picker"const [time, setTime] = React.useState("")<TimePicker value={time} onChange={setTime} />

"use client"import * as React from "react"import { cn } from "cn"import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select"/** เติมเลขให้ครบสองหลัก เช่น 9 -> "09" */function pad2(n: number) {  return String(n).padStart(2, "0")}function TimePicker({  value,  onChange,  minuteStep = 1,  disabled,  className,  ...props}: Omit<React.ComponentProps<"div">, "value" | "onChange"> & {  /** ค่าเวลา "HH:mm" แบบ 24 ชม. ("" = ยังไม่เลือก) */  value?: string  onChange?: (time: string) => void  disabled?: boolean  /** ระยะห่างของตัวเลือกนาที เช่น 5 จะได้ 00, 05, 10, ... */  minuteStep?: number}) {  const [hour, minute] = (value ?? "").split(":")  const step = Math.max(1, Math.round(minuteStep))  const minutes = React.useMemo(    () => Array.from({ length: Math.ceil(60 / step) }, (_, i) => i * step),    [step]  )  const setHour = (h: string) => {    // ยังไม่มีนาที -> ตั้งเป็น 00 ให้เลย เพื่อส่งค่า "HH:mm" ที่ครบ    onChange?.(h ? `${h}:${minute || "00"}` : "")  }  const setMinute = (m: string) => {    if (hour && m) onChange?.(`${hour}:${m}`)  }  return (    <div      data-slot="time-picker"      className={cn("flex w-full min-w-0 items-center gap-1", className)}      {...props}    >      <NativeSelect        aria-label="ชั่วโมง"        disabled={disabled}        value={hour}        onChange={(e) => setHour(e.target.value)}        className="min-w-0 flex-1"      >        <option value="">ชั่วโมง</option>        {Array.from({ length: 24 }, (_, i) => pad2(i)).map((h) => (          <NativeSelectOption key={h} value={h}>            {h}          </NativeSelectOption>        ))}      </NativeSelect>      <span aria-hidden="true" className="text-muted-foreground select-none">        :      </span>      <NativeSelect        aria-label="นาที"        disabled={disabled || !hour}        value={minute}        onChange={(e) => setMinute(e.target.value)}        className="min-w-0 flex-1"      >        <option value="">นาที</option>        {minutes.map((m) => (          <NativeSelectOption key={m} value={pad2(m)}>            {pad2(m)}          </NativeSelectOption>        ))}      </NativeSelect>    </div>  )}export { TimePicker }