Skip to content
Copyright © 2024 by Westpac Banking Corporation. All rights reserved.

Date pickers assist when dates are not known, set in the future, to schedule something, or assist in providing “day of the week” context.


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.

Error state

User experience

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

Visual design

The visual design of the calendar and the date indicators have been very carefully designed to ensure accessibility and brand alignment.

Dos and don'ts

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

Where is this available?

The GEL design System will always have the latest component versions and additions, however new components and changes to existing components may roll out to other platforms at different times.

ComponentsCopyright © 2023 by Westpac Banking Corporation. All rights reserved.