Date Field

"use client"

import { parseDate } from "@internationalized/date"

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

export function DateFieldDemo() {
  return (
    <div className="max-w-xs">
      <DateField
        label="Date"
        granularity="day"
        defaultValue={parseDate("2023-10-15")}
      />
    </div>
  )
}

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