---
url: /docs/components/date-picker/styling.md
---
# Date picker - Styling

A date picker allows the user to select a specific calendar date.

## Layout and sizing

Text field and picker popover padding and size measurements.

::: image-block
![Example of a date picked with a focused date input field and an open calendar below. A highlight shows a 0 px gap between the input field field and the calendar popover.](/components/datepicker/style-layout_sizing_1.svg)
:::

::: image-block
![Example of the date picker calendar with a red highlight, displaying a 4 px gap between the row of weekdays and first row of dates.](/components/datepicker/style-layout_sizing_2.svg)
:::