Intelligence Community Design System

Canary components are unstable components that are released for testing purposes.

We value any feedback from users willing to try them in their applications.

These components should not be used in production apps without understanding the risk that changes may occur in order to fix bugs or improve functionality.

For more information on Canary components, read our approach to releases and versions .

Additional details on the props and events for this component can be found in the Canary web components and Canary React storybooks.

Use a date picker to select an event that is near to the present time.

Use a date picker to select a date that is known or desired, such as an appointment.

Use a date picker to select a single date where visualising that date could be useful.

Use a date picker when there is a need to view a date in context. For example, if there is a need to see which day of the week a future event occurs.

Avoid using a date picker for well-known dates, such as dates of birth, because it is often easier to type this into a field. For example, if selecting 30/07/1966, consider using date input as a date picker would require many clicks to arrive at the same date.

Use the date picker size properties to change its vertical size and achieve compact or spacious layouts.

Use the resizing options to increase or decrease width to match other elements in a form.

Use the date input resizing options to change size of the input and calendar between minimum and maximum widths. For example, to create a larger date picker, resize width of date input .

Use content styling for help with building effective labels for people using date input.

Use helper text to indicate restrictions in your date input such as not allowing weekends.

Use a placeholder to demonstrate an example of the desired input. Do not add essential information into the placeholder as it will be hidden when a date is entered into the field.

Setopen-at-date to specify the date in view when the date picker is opened. If no date is set, the date picker will default to showing the current date.

The date input and the date picker update according to any input made. For example, if 10/10/2100 is entered in the date input , the date picker will open to display the selection.

See date input for detailed guidance on how to display errors within the date picker.