DateField

Date input built on React Aria's DateField. The value is split into segments (month, day, year) that are each editable by typing or with the arrow keys, and the segment order follows the user's locale.

import { CalendarDate } from "@internationalized/date"
import { DateField } from "@pockets-ui/components"

Values are @internationalized/date objects rather than JavaScript Dates, so a calendar date carries no time or time zone and can't drift across one.

Basic

Appointment date
mmddyyyy
Each segment is individually editable — use the arrow keys or type.
Code
import { DateField } from "@pockets-ui/components"

export default function DateFieldBasic() {
  return (
    <DateField
      label="Appointment date"
      description="Each segment is individually editable — use the arrow keys or type."
    />
  )
}

With a value

Launch date
7192026
Code
import { CalendarDate } from "@internationalized/date"
import { DateField } from "@pockets-ui/components"

export default function DateFieldWithValue() {
  return (
    <DateField
      label="Launch date"
      defaultValue={new CalendarDate(2026, 7, 19)}
    />
  )
}

Invalid

Due date
112020
Please pick a date in the future.
Code
import { CalendarDate } from "@internationalized/date"
import { DateField } from "@pockets-ui/components"

export default function DateFieldInvalid() {
  return (
    <DateField
      label="Due date"
      isInvalid
      errorMessage="Please pick a date in the future."
      defaultValue={new CalendarDate(2020, 1, 1)}
    />
  )
}

Disabled

Archived on
12312024
Code
import { CalendarDate } from "@internationalized/date"
import { DateField } from "@pockets-ui/components"

export default function DateFieldDisabled() {
  return (
    <DateField
      label="Archived on"
      isDisabled
      defaultValue={new CalendarDate(2024, 12, 31)}
    />
  )
}

Related

  • DatePicker — this field plus a calendar popover.
  • Calendar — the month grid on its own.