Date pickerforms

Date field with typed entry and a popover calendar that becomes a bottom drawer on phones; values are YYYY-MM-DD strings.

설치

pnpm

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

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

Default

No date selected

date-picker-demo.tsx

"use client";
import * as React from "react";import type { DateOnly } from "@plott/webkit-time";import { DatePicker } from "@/components/ui/date-picker";
export default function DatePickerDemo() {  const [value, setValue] = React.useState<DateOnly | null>(null);  return (    <div className="flex flex-col gap-2">      <DatePicker aria-label="Birth date" value={value} onValueChange={setValue} max="2030-12-31" name="date" />      <p className="text-sm text-muted-foreground">{value ?? "No date selected"}</p>    </div>  );}