Guidelines for date pickers
The date picker control provides a standardized way to choose a specific date. The entry point displays the chosen date, and selecting the entry point expands a picker surface for the user to make a selection. The date picker overlays other UI; it doesn't push other UI out of the way.
The date picker displays dates on forms or when you need efficient use of space. The date picker is for selecting a single date. For a control that selects a range of dates, see the Calendar date picker.
Selecting the control's entry point expands it vertically from the middle: