DatePicker

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

import { DatePicker } from "@/components/ui/date-picker"const [date, setDate] = React.useState<Date | null>(null)<DatePicker value={date} onChange={setDate} />

"use client"import * as React from "react"import { th } from "date-fns/locale"import { CalendarIcon } from "lucide-react"import { cn } from "cn"import type { Matcher } from "react-day-picker"import { Calendar } from "@/components/ui/calendar"import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"/** ชื่อเดือนภาษาไทย ("มกราคม", "ม.ค.") */function thaiMonth(date: Date, style: "long" | "short") {  return new Intl.DateTimeFormat("th-TH", { month: style }).format(date)}/** จัดรูปแบบวันที่ภาษาไทย เช่น "13 พฤศจิกายน 2569" — ปี พ.ศ. = ค.ศ. + 543 (เฉพาะการแสดงผล) */export function formatThaiDate(  date: Date,  buddhistEra: boolean,  style: "long" | "short" = "long") {  const year = date.getFullYear() + (buddhistEra ? 543 : 0)  return `${date.getDate()} ${thaiMonth(date, style)} ${year}`}function DatePicker({  value,  onChange,  placeholder = "เลือกวันที่",  disabled,  min,  max,  buddhistEra = true,  className,  ...props}: Omit<React.ComponentProps<"button">, "value" | "onChange"> & {  /** วันที่ที่เลือก (null = ยังไม่เลือก) */  value?: Date | null  onChange?: (date: Date | null) => void  placeholder?: string  /** วันต่ำสุดที่เลือกได้ */  min?: Date  /** วันสูงสุดที่เลือกได้ */  max?: Date  /** แสดงปีเป็น พ.ศ. (ค.ศ. + 543) */  buddhistEra?: boolean}) {  const [open, setOpen] = React.useState(false)  const disabledMatchers = React.useMemo(() => {    const matchers: Matcher[] = []    if (min) matchers.push({ before: min })    if (max) matchers.push({ after: max })    return matchers.length ? matchers : undefined  }, [min, max])  return (    <Popover open={open} onOpenChange={setOpen}>      <PopoverTrigger        type="button"        data-slot="date-picker"        disabled={disabled}        className={cn(          "flex h-8 w-full min-w-0 items-center justify-between gap-2 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground",          !value && "text-muted-foreground",          className        )}        {...props}      >        <span className="truncate">          {value ? formatThaiDate(value, buddhistEra) : placeholder}        </span>        <CalendarIcon aria-hidden="true" />      </PopoverTrigger>      <PopoverContent align="start" className="w-auto p-0">        <Calendar          mode="single"          locale={th}          defaultMonth={value ?? undefined}          selected={value ?? undefined}          onSelect={(date) => {            onChange?.(date ?? null)            setOpen(false)          }}          disabled={disabledMatchers}          formatters={{            formatCaption: (month) =>              `${thaiMonth(month, "long")} ${                month.getFullYear() + (buddhistEra ? 543 : 0)              }`,          }}        />      </PopoverContent>    </Popover>  )}export { DatePicker }