# Datepicker The `` element allows users to select a date, or a pair of dates identifying a range, either with text input or by making a section in a calendar. The `` element is the combination of [auro-dropdown](http://auro.alaskaair.com/components/auro/dropdown), [auro-input](http://auro.alaskaair.com/components/auro/input), and Auro's extension of [wc-range-datepicker](https://www.npmjs.com/package/wc-range-datepicker). ## Use Cases The `` element should be used in situations where users may: * select a single date * select a pair of dates which identify a calendar range ## Example(s) ### Basic

Close Calendar Datepicker Headline Choose a date Choose a date

See code ```html Close Calendar Datepicker Headline Choose a date Choose a date ``` ### Range The datepicker can also be used to select a range between two dates by adding the `range` attribute.

Close Calendar Datepicker Range Headline Departure Return Departure Return

See code ```html Close Calendar Datepicker Range Headline Departure Return Departure Return ``` ### Snowflake Layout Use `layout="snowflake"`, with `shape="snowflake"` and `appearance="inverse"` to apply the snowflake layout to the datepicker. This layout is designed for use on dark backgrounds.

Close Calendar Date Datepicker Headline Choose a date Choose a date

See code ```html Close Calendar Date Datepicker Headline Choose a date Choose a date ``` #### Range Ranged variation of the snowflake layout.

Close Calendar From Date Test To Date Test Testing Date Label Datepicker Headline Choose a departing date Choose a returning date

See code ```html Close Calendar From Date Test To Date Test Testing Date Label Datepicker Headline Choose a departing date Choose a returning date ```