Sizes

The date picker can be used in various sizes to match the UI direction.

Date range

In order to create a date range, two date pickers need to be used with appropriate input labels above to give context.

Established convention of layout places two date pickers side by side, with stacked date pickers also an option particularly when horizontal space is at a premium or in a responsive context.

Unavailable dates

When dates are unavailable for whatever reason, the strikethrough styling is applied. This can be for the following scenarios:

• Any one date
• Any consecutive dates
• Any multiple dates (consecutive or otherwise)
• Specific days of the week (eg Wednesdays) and/or weekends.

User experience

Ensure a label is applied to every date picker in order to provide context for users and for accessibility.

Visual design

The date picker has been visually engineered to meet accessibility and multi-brand requirements.

Dos and don'ts

Never use a date picker for a memorable date, ie Date of birth