DatePicker

Carbon-spec date picker. Wraps react-day-picker for the calendar grid + Popover for the dropdown surface. TextInput for the trigger.

patternsstablea11y: untested3/3 coverageEdit on GitHub ↗
patterns-datepicker--defaultOpen all variants →

When to use

  • Any single date or date-range field — task due dates, filter ranges, scheduled deploys.
  • Form fields where the user benefits from a calendar grid for picking and an inline text-input for keyboard entry.

When not to use

  • Time-of-day pickers without a date axis → use a plain `TextInput` type="time" (the kit doesn't yet ship a styled time picker).
  • Datetime fields with timezone-sensitive UX → wrap DatePicker yourself and add a separate timezone Select beside it.
  • Free-text date input where calendar UI is unwanted → use `TextInput` with your own parser.