Skip to content
IndexDesign corpus

Date Picker

59 resources ship this component · Inputs

Also called: datepicker, calendar picker, datetime picker, date select, date dialog.

Before you ship7 checks
  1. 01Calendar grid — A month view with days arranged in a weekly grid, navigable forward and backward by month, as the primary date selection surface
  2. 02Text input alongside — A free-text date field paired with the calendar, so users who know the date can type it rather than relying on clicking only
  3. 03Date range selection (if applicable) — The ability to select a start and end date, with the range highlighted across the calendar grid and both values independently editable
  4. 04Disabled dates — Past dates, unavailable dates, or out-of-range dates visually distinct from selectable ones
  5. 05Today shortcut — A clearly labelled button or link to jump to today's date
  6. 06Locale and format — The calendar respecting regional conventions e.g. week starting on Monday or Sunday, date format in the text input matching the user's locale (DD/MM or MM/DD)
  7. 07Time selection (if applicable) — When a time is also required, a time picker integrated with or accessible directly from the date picker (not a separate, disconnected control)

Checks from checklist.design, MIT.

Ships it59