Shim

DateField

Enter a date by typing.

Documentation
React Aria
Source
GitHub
Issues
Report
Composes
Field
Install
pnpm dlx @kkga/shim add date-field
Date
mmddyyyy
Date
mmddyyyy––AM
Date
mmddyyyy––––AM
Date
mmddyyyy––––––AM
import { DateField } from "@/shim-ui/date-field";

export default () => (
  <>
    <DateField label="Date" />
    <DateField granularity="hour" label="Date" />
    <DateField granularity="minute" label="Date" />
    <DateField granularity="second" label="Date" />
  </>
);

Install

Use the CLI or copy the source code manually.

pnpm dlx @kkga/shim add date-field

Size

Use size prop to set the size of the DateField component.

Date
mmddyyyy
Date
mmddyyyy
Date
mmddyyyy
Date
mmddyyyy
import { DateField } from "@/shim-ui/date-field";

export default () => (
  <>
    <DateField label="Date" labelPosition="side" size={1} />
    <DateField label="Date" labelPosition="side" size={2} />
    <DateField label="Date" labelPosition="side" size={3} />
    <DateField label="Date" labelPosition="side" size={4} />
  </>
);

Variant

Use the variant prop to set the visual style.

Date
mmddyyyy
Date
mmddyyyy
Date
mmddyyyy
import { DateField } from "@/shim-ui/date-field";

export default () => (
  <>
    <DateField label="Date" labelPosition="side" variant="classic" />
    <DateField label="Date" labelPosition="side" variant="soft" />
    <DateField label="Date" labelPosition="side" variant="outline" />
  </>
);