Date picker

Let your user select a date or range of dates - a feature in the Ripple design system.


The date picker component allows a user to select a valid calendar date.

The components defaults to the current month, and users can scroll forwards or backwards through months.


A visual example of the date picker.


The date picker can be used to select one specific date, or a range between two dates.

How to build

Date pickers are currently only addable in forms.

If you'd like to add a form to your site, contact your SDP content lead.

Reviewed 06 July 2020

Get support using SDP

Our community of practice for anyone with content on SDP meets once every 2 months. We cover research, analytics, new features and more. You can also learn from how others are using the platform and get support to build new pages. To join or find out more contact

Was this page helpful?