has been released! Read the upgrade guide

Date Picker

The documentation on this page is considered legacy.

We will be updating this content to our new principle-based format in the near future.

The Date Picker component lets the user pick a date from a calender dropdown widget.


The Date Picker component lets the user pick a date from a calendar dropdown widget.


This component can be used as a standalone component or as part of a form, alongside other inputs.


  1. Date Picker Input. This component displays the currently selected date.

  2. Calendar Widget. Provides a graphical way for the user to select a date.

3Sizing & Spacing

The date picker component is sized to sit next to input components within a form.

4Date Picker with Range Selection

The Date Picker with Range Selection component is very similar to the standard Date Picker. This component lets the user select both a start and end date, using two calendar widgets.

The MOD.UK Design System provides guidance and tools for building high–quality Services within the UK Ministry of Defence. This project is open source and its source code is available on GitHub.

All content is available under the Apache 2.0 licence, except where otherwise stated.

© Crown copyright