---
url: /components/date-pickers/overview.md
description: >-
  Date pickers let people select a date, or a range of dates. Date pickers can
  display past, present, or future dates.
---

# Date pickers

Date pickers let people select a date, or a range of dates. Date pickers can display past, present, or future dates.

**Overview** · [Specs](specs.md) · [Guidelines](guidelines.md) · [Accessibility](accessibility.md)

![Date pickers](/assets/f7780654-mrolej37-date-picker.CLv65l3Z.webp)

* Date pickers can display past, present, or future dates
* Three variants: [docked](guidelines.md#8d78696c-a756-4a4d-b7dd-846d866ba985 "Docked date pickers open from an onscreen input similar to a text field. They're often used within forms."), [modal](guidelines.md#ced55f72-28b5-4f5d-a347-fa38214ef2d4 "Modal date pickers extend full-screen. They're often used for selecting a date range."), [modal input](guidelines.md#d91ce7bc-dbc7-43e3-a802-152f2f9c892a "Modal date inputs allow the manual entry of dates using the numbers on a keyboard. They're often used in compact layouts.")
* Clearly indicate important dates, such as current and selected days
* Follow common patterns, like a calendar view

![3 variants of date pickers side-by-side. The docked date picker has an outlined text field above a calendar view. The modal date picker allows people to select a date from a calendar view. The modal date input lets someone type in a date.](/assets/0b5d38e5-md5mxu7o-01.CaOaTDhA.webp)

1. Docked date picker
2. Modal date picker
3. Modal date input

## Availability & resources

| Type | Resource | Status |
| --- | --- | --- |
| Design | [Design Kit (Figma)](https://www.figma.com/community/file/1035203688168086460) | Available |
| Implementation | [Flutter](https://api.flutter.dev/flutter/material/DatePickerDialog-class.html) | Available |
| Implementation | [Jetpack Compose](https://developer.android.com/develop/ui/compose/components/datepickers) | Available |
| Implementation | [Android Views (MDC-Android)](https://github.com/material-components/material-components-android/blob/master/docs/components/DatePicker.md) | Available |
| Implementation | Web | Unavailable |

## Differences from M2

* Typography and spacing: Titles and labels are larger and have increased spacing to accommodate 48dp target size
* Color: New color mappings and compatibility with [dynamic color](../../styles/color/dynamic/choosing-a-source.md "Dynamic color takes a single color from a user's wallpaper or in-app content and creates an accessible color scheme assigned to elements in the UI.")
* Variants: The three variants of date pickers have been renamed to not be device-dependent. The former desktop date picker is now known as the [docked date picker](guidelines.md#8d78696c-a756-4a4d-b7dd-846d866ba985 "Docked date pickers open from an onscreen input similar to a text field. They're often used within forms."). The former mobile date picker and date input are now known as [modal date picker](overview.md "Modal date pickers extend full-screen. They're often used for selecting a date range.") and [modal date input](overview.md "Modal date inputs allow the manual entry of dates using the numbers on a keyboard. They're often used in compact layouts.") to reinforce that the user must take an action.

![Old version of a date picker with a white background and shadows.](/assets/3cb22c4a-le4qmou9-1p-datepicker_whatsnew_1.CoHwgsXt.webp)

M2: Date pickers had a drop shadow and different color mappings

![New version of date picker with a colorful background, rounded corners, and no shadows.](/assets/a9b21fab-md5mtxw0-03.CxopXQEN.webp)

M3: Date pickers have larger typography, no shadow, and new color mappings compatible with dynamic color