A date picker is an input field that expands and allows users to select a single date or date range (by selecting a start and end date). As with a text input field, a date picker should have a label, placeholder text and, if necessary, helper text. Date picker fields should always include a calendar icon.
Selecting the calendar icon in the text field opens the calendar view. The current date should always be underlined with the number displayed using a heavier weight. Previous and next arrows allow users to move through the months of the year. When a date is selected it becomes highlighted.
When a range is required, users will be asked to pick a start and end date. The behaviour for this scenario matches single date selection with a few exceptions:
The calendar view should use a label to inform the users which date they’re selecting (start or end).
After selecting the first date in the range, users should be automatically transitioned to a state where they’ll select the second date. The first date should always be visible and clearly communicated.
How it works
The date picker has been styled to match The City of Winnipeg brand. All required CSS is included here inside _sass/components/_datepicker.scss.
Single date example
Date range example