Skip to content
Index730 resources
Date Picker

Date Picker

55 resources in the index ship this component, best first. Group: Inputs.

Also called · datepicker · calendar picker · datetime picker · date select · date dialog

Before you ship

7
  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 it

55