Date Field

"use client"

import {
  DateField,
  DateInput,
} from "@/components/ui/preskok-ui/date-field"
import { Label } from "@/components/ui/preskok-ui/field"

export function DateFieldDemo() {
  return (
    <DateField>
      <Label>Event date</Label>
      <DateInput />
    </DateField>
  )
}

Installation

pnpm
npm
yarn
bun
pnpm dlx @preskok-org/ui@latest add date-field
Copy

Usage

Copyimport { parseDate } from "@internationalized/date"
 
import { DateField } from "@/registry/preskok/ui/preskok-ui/date-field"
 
export function Example() {
  return (
    <DateField
      label="Date"
      granularity="day"
      defaultValue={parseDate("2024-02-10")}
    />
  )
}

Props

• label: string — Optional label text.
• description: string — Optional help text.
• errorMessage: string | (validation) => string — Error text.
• prefix/suffix: ReactNode — Inline adornments.
• Plus all react-aria-components DateField props.

Features

• Segmented input with keyboard affordances
• Validation states and error messaging
• Prefix/Suffix adornments
• Accessible by default