Skip to content

Date picker - Styling

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

AndroidreleasedElementsreleasediOSreleasedReact 19released

Layout and sizing

Text field and picker popover padding and size measurements.

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.

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.

Questions?

Feel free to ask any questions on usage in the Warp DS Slack channel: #warp-design-system