Date input foundationforms
Shared date helpers for the uikit pickers: locale-ordered date parsing, bounds checks, grid key navigation, calendar props from the locale provider, and a popover-or-drawer overlay.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/date-inputDefault
date-input-demo.tsx
"use client";
import { dateOnly } from "@plott/webkit-time";import { Calendar } from "@/components/ui/calendar";import { useCalendarProps } from "@/hooks/use-calendar-props";import { parseDateInput } from "@/lib/date-input";import { useLocaleSettings } from "@/lib/locale";
export default function DateInputDemo() { const { locale } = useLocaleSettings(); const { todayDate, props } = useCalendarProps(dateOnly("2028-02-29")); const typed = parseDateInput("02/29/2028", locale); return ( <div className="flex flex-col gap-2"> <p className="text-sm text-muted-foreground">{`Typed: ${typed ?? "invalid"}, today: ${todayDate}`}</p> <Calendar mode="single" defaultMonth={new Date(2028, 1, 1)} {...props} /> </div> );}