DatePicker

Props

• aria-label
  string

  Names the trigger when there is no label: "Expires". What it shows (the date, or the placeholder) becomes its description.

• aria-labelledby
  string

  Names the trigger by the elements with these ids, as aria-label does.

• defaultValue
  Date | null

  The chosen day on first render.

• description
  ReactNode

  One sentence of help under the label.

• disabled
  boolean

  Turns it off: it can't be used, and it looks dimmed.

• disabledDays
  ((date: Date) => boolean)

  Returns true for days that can't be chosen.

• id
  string

  The id of the control, so a label elsewhere can point to it.

• label
  ReactNode

  The visible label.

• layout
  "horizontal" | "vertical"

  The label above the control (vertical) or beside it (horizontal).

• onValueChange
  ((value: Date | null) => void)

  Called with the chosen day, or null when it is cleared.

• optional
  boolean

  Adds “Optional” to the label, for forms where most fields are required.

• placeholder
  string

  Shown without a date. Defaults to "Pick a date" ("Pick a range" for a range) in the provider's language.

• required
  boolean

  Marks it as required in a form.

• size
  "md" | "sm" | "lg"

  The height of the field.

• value
  Date | null

  The chosen day, when you control it.

• weekStartsOn
  0 | 4 | 1 | 2 | 3 | 5 | 6

  The first day of the week, from 0 (Sunday) to 6 (Saturday); the language decides by default.