Date picker

Usage

The date picker enables users to select a date or a range of dates. Its goal is to display past, present or future events and it has to indicate clearly important dates such as start date, end date, selected days, today’s date.  It consists of two parts: the date input field (1) and the date picker (2). Users can either use the input field to type a date or use the date picker icon button to open the date picker. If a user enters the input field, the calendar also opens so they can choose between entering the date manually or selecting the date within the calendar.    This component also allows users to navigate directly from one month or year to another.    Unless the context require the date picker to have a default date (ex : today’s date), a placeholder should always be displayed. (dd/mm/yyyy)   

Types 

Closed display of the date in a textcontainer with an iconbutton, and a label (not mandatory)

Open with date picker: text container and label + open date picker, displaying a calendar.

Open with time picker: text container and label + open time picker, displaying a clock.   Open with year picker: text container and label + open year picker, displaying a list of years.   Footer: additionnal buttons at the bottom of the date picker, allowing a user to switch between two types of content display, calendar and time for example.

 

Anatomy and content 

Date picker  

1. Text field 
2. Button 
3. Year and month selection 
4. Next/previous month navigation 
5. Days of the week 
6. Current day 
7. First/last day 
8. Selected day   

Time picker   

1. Text field 
2. Button 
3. Time selected   

Year picker  

1. Text field 
2. Button 
3. Year and month selection 
4. Year selected   

Behaviour and interaction 

Selecting a single date     The user selects a date by clicking it (1). After the user selects a day, the calendar closes and the date appears in the date input field.   

Selecting a date range    The user selects the start date by clicking it (1), he then selects the end date by clicking it as well (2). The days in between are highlighted to indicate that they are selected (3).   

Displaying the next month    In order to display the next month or the previous month, the user clicks on the arrows buttons (1) located on the top right corner.   

Displaying the year picker 

To display the year picker the user clicks on the button, located on the top left corner (1). Once opened, the user click on the desired year in order to select it.   

Displaying the time picker

In some cases, the date picker component contains a footer that enables the user to choose the time. By clicking on the “Clock” icon (1) the user displays the time picker.   

Selecting the time through the time picker 

Once the time picker is opened, the user can select the hour by clicking on the relevant number (1). Following that click the minutes clock will appear and the user will click once again on the relevant number to indicate the minutes.  Concerning the minutes, the user can drag the clock hand around in order to indicate the exact minute.