Alert Avatar Bottom sheet Button Card Carousel Cards Checkbox Chip Circular button Compact date input Copy Block Critical banner Date input Date picker When to useBest practiceAvailability Divider Dropdown Icon button Image Ratios Instruction Media Button Modal Money input Navigation option Nudge Password input Popover Progress Bar Progress Spinners Promo card Radio Screen loader Search input Section header Segmented control Select Snackbar Summary Switch Table Tabs Text area Text input Upload Upload input
Design at Wise Foundations Components AlertAvatarBottom sheetButtonCardCarousel CardsCheckboxChipCircular buttonCompact date inputCopy BlockCritical bannerDate inputDate pickerDividerDropdownIcon buttonImage RatiosInstructionMedia Button ModalMoney inputNavigation optionNudgePassword inputPopoverProgress Bar Progress SpinnersPromo cardRadioScreen loaderSearch inputSection headerSegmented controlSelectSnackbarSummarySwitchTableTabsText areaText inputUploadUpload inputPatterns Resources
Date picker

Use date picker to let users pick a date from a calendar.

Date picker component
When to use

Use a date picker:

  • when the user needs to decide a date — like the best date for an appointment
  • when the date options are relatively close to the present day

Don't use a date picker:

  • when the user needs to select a set date that they know, like their birthday — use date input instead

Best practice

  • Date picker should open the native picker, like the native calendar.

Availability

Platform

Available

Developer documentation

Android

iOS

Web