Date Picker

Date (or range) field with a calendar popover; segments are editable by keyboard.

Import

import { DatePicker, DateRangePicker } from '@marbleui/ui'

Props

<DatePicker>

Prop	Type	Default
description	`ReactNode`	`—`
errorMessage	`string \| ((validation: ValidationResult) => string)`	`—`
label	`ReactNode`	`—`
variant	`FieldVariant`	`—`

Also accepts React Aria props (112).

<DateRangePicker>

Prop	Type	Default
description	`ReactNode`	`—`
errorMessage	`string \| ((validation: ValidationResult) => string)`	`—`
label	`ReactNode`	`—`
months	`1 \| 2`	`2`
variant	`FieldVariant`	`—`

Also accepts React Aria props (113).

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitives: React Aria Button · React Aria DateInput · React Aria DatePicker · React Aria DateRangePicker · React Aria DateSegment · React Aria Dialog · React Aria Group. Follow the primitive's docs for the full keyboard map.

Usage notes

Date field with a calendar popover. Segments are typed with the keyboard; the button opens the calendar.

import { today, getLocalTimeZone } from '@internationalized/date'
<DatePicker label="Due date" minValue={today(getLocalTimeZone())} />
<DateRangePicker label="Reporting period" />

Values are @internationalized/date objects (CalendarDate, ZonedDateTime), not Date; formatting follows the locale.
Use granularity="minute" (or DateTimePicker) to include time.
isDateUnavailable greys out days (weekends, booked dates) while keeping them navigable.

Example source · show

import { getLocalTimeZone, now, today } from '@internationalized/date'
import { DatePicker, DateRangePicker } from './date-picker'

export const styles = {
  Date: () => <DatePicker className="w-60" label="Due date" defaultValue={today(getLocalTimeZone()).add({ days: 7 })} />,
  Range: () => {
    const t = today(getLocalTimeZone())
    return <DateRangePicker className="w-80" label="Reporting period" defaultValue={{ start: t.subtract({ days: 30 }), end: t }} />
  },
  'Date & time': () => (
    <DatePicker
      className="w-72"
      variant="filled"
      label="Publish at"
      granularity="minute"
      hideTimeZone
      defaultValue={now(getLocalTimeZone()).add({ hours: 2 }).set({ minute: 0, second: 0, millisecond: 0 })}
      description="Posts go live at this time in your timezone."
    />
  ),
}

Source: packages/ui/src/date-picker/date-picker.tsx

Catalog

Category: date-time
Priority: Foundation
Primitive: react-aria
React Aria: DatePicker