DatePicker UI Control Document


Author: Jindrich Dinga
Last Update: Oct 5th, 2011

 

Please note that all pictures that are shown in this document are for illustration purposes only.

 

Table of Contents

Table of Contents
1 Overview
2 Interaction Design
2.1 Basic Functionality
2.2 Additional Functionality
3 Navigation
3.1 Mouse Support
3.2 Touch Support
3.3 Directional Keys + OK/Select Support
3.4 Keyboard Support


1 Overview

DatePicker is a control that allows users to easily select a date from a given calendar. It is mainly used on web sites or in applications that require users to enter a date. DatePicker control usually consists from DateField, which may or may not be occupied with an icon, and DateChooser.

The following image shows overview of DatePicker control.

Figure 1 DatePicker overview

2 Interaction Design

 

2.1 Basic Functionality

In normal state, there is a prompt text displayed in DateField in order to show required format of the date. From accessibility point of view, this prompt text is especially important when users enter the date into DateField by using keyboard and not by choosing the date from DateChooser.

Please note that in case the date is entered in an incorrect format, an inline error message should appear along with highlighting DateField in a color (i.e. red). Placement of this error message is solely up to developer of the application.

Figure 2 Example of DateField with default prompt text

Immediately, when DateField gets focus DateChooser pops-up (with an animation) in order to allow users to select the date by using their mouse. Upon selecting the date, DateChooser is closed and the selected date is displayed in DateField.

Figure 3 DatePicker control

If users type date into DateField, DateChooser automatically updates based on entered data.

Please note that in DateChooser all days have the following states: normal, over, press, and selected. Current day and month should be visually differentiated from regular days.

2.2 Additional functionality

Apart from the basic functionality, DatePicker control also offers additional functionality that application developers may need.

 

Different date formats

Application developers MUST be able to choose format of the date that fits their needs. These formats are as follows:

Figure 4 Date formats
prompt text: mm/dd/yyyy (default) prompt text: mm/dd/yy prompt text: yyyy-mm-dd
     
prompt text: yyyy/mm/dd prompt text: Day, dd Month, yyyy  
 

Please note that if a day or month starts with "0", the "0" does not have to be entered.

 

DateChooser behavior

Application developers MUST be allowed to change the behavior of DateChooser in such way so it pops-up only upon clicking the calendar icon or stays visible all the time.

Figure 5 DatePicker control - DateField along with the calendar icon

 

Date range restriction

Application developers MUST be allowed to disable certain dates in DateChooser.

Figure 6 Date range restriction (Sat & Sun disabled)

 

Position of DateChooser

Application developers MUST be allowed to specify where DateChooser should pop-up. By default, DateChooser pops-up right below DateField, aligned to right.

 

Localized DateChooser

Application developers MUST be allowed to choose language in which DateChooser should be displayed.

 

Multiple months

In DatePicker control, there should be a possibility for application developers to choose how many months DateChooser SHOULD display. The default number of months displayed in DateChooser is "1".

Figure 7 DateChooser shows two months

After pressing the left arrow icon previous month slides out and pushes all months to right. Similarly, after pressing the right arrow icon next month slides out and pushes all months to left.

 

Time

In some cases, there might be a need from application developers to get a time stamp from users. If so, application developers SHOULD be allowed to enable showing controls that allow users to enter the time into DateField. The time is added right after the date.

The following pictures show basic date formats along with time.

Figure 8 Date formats along with time
prompt text: mm/dd/yyyy hh:mm:ss prompt text: mm/dd/yy hh:mm:ss
   
prompt text: yyyy-mm-dd hh:mm:ss prompt text: yyyy/mm/dd hh:mm:ss
   
prompt text: Day, dd Month, yyyy hh:mm:ss  
 

In addition to the time, it WOULD BE NICE if application developers would be allowed to enable showing the time zone drop down in DateChooser.

Figure 9 DateChooser along with time and time zone controls

Please note that if users select 12h time format, AM or PM appends the time that is displayed in DateFiled, e.g.11:28:28AM.

 

Week starts on [day]

By default, the week starts on Sunday, but application developers SHOULD be allowed to change it according to their needs.

 

Weeks of the year

It WOULD BE NICE if application developers are able to enable showing weeks of the year in DateChooser.

Figure 10 DateChooser with weeks of the year

 

Today button

It WOULD BE NICE if application developers are able to enable showing Today button in DateChooser. By pressing that button, DateChooser would change its view to show the current date. Today button is placed right below the calendar; aligned to left.

Figure 11 DateChooser with Today button

 

Pictures in DateChooser

It WOULD BE NICE if application developers are able to customize DateChooser in such way, so images are displayed there. It should be possible to display static images as well as images that are taken from a server.

Figure 12 DateChooser with an image

 

DateChooser on touch platforms

Even though the design of DateChooser, which has been described above, should be sufficient for touch platforms, it WOULD BE NICE if application developers are provided with another design they can choose from.

Figure 13 Appearance of DateChooser on touch platforms

In such control, users are supposed to swipe their finger across a part of DateChooser control from:

  • top to bottom to increase the value or from
  • bottom to top to decrease the value.

The value that is in the middle of the control is the chosen/selected value. Please note that default values should be shown in a different color.

Figure 14 Stepper/Spinner for touch platform overview

 

Animations

This chapter shows some basic animations of how DateChooser pops-up once DateField gets focus.

Flash movie 1 SlideIn/SlideOut effect

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

Flash movie 2 SlideRight/SlideLeft effect

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

Flash movie 3 FadeIn/FadeOut effect

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

Apart from these basic effects mentioned above, application developers SHOULD be allowed to create their own effects for poping-up DateChooser.

 

3 Navigation

3.1 Mouse Support

The following table describes actions that are performed when users click on:

  Action
DateField or Icon Display DateChooser.
LEFT arrow If DateChooser is open, go to the previous month.
RIGHT arrow If DateChooser is open, go to the next month.
Day If DateChooser is open, close DateChooser and update DateField with the selected date.
Outside DateChooser Close DateChooser without updating DateField.

 

3.2 Touch Support

The following table describes actions that are performed when users tap on:

  Action
DateField or Icon Display DateChooser.
LEFT arrow If DateChooser is open, go to the previous month.
RIGHT arrow If DateChooser is open, go to the next month.
Day If DateChooser is open, close DateChooser and update DateField with the selected date.
Outside DateChooser Close DateChooser without updating DateField.

 

In case another design of DateChooser for touch platform is implemented:

Gesture Action
Swipe TOP to BOTTOM Increase the value. Values change with a smooth animation and momentum.
Swipe BOTTOM to TOP Decrease the value. Values change with a smooth animation and momentum.

 

3.3 Directional Keys + OK/Select Support

The following table describes actions that are performed when users navigate to DateField using the arrow keys:

Keystroke Action
OK/SELECT If focus is in DateField, perform default action.

If focus is in DateChooser, update DateField with the selected date and/or time and close DateChooser.
UP arrow Move focus to DateChooser if open above DateField.

If focus is in DateChooser, move focus up by one item.
DOWN arrow Move focus to DateChooser if open below DateField.

If focus is in DateChooser, move focus down by one item.
LEFT arrow

Move the insertion point to the left within DateField if applicable. Move focus to DateChooser if open on left side of DateField.

If focus is on a month in DateChooser, go to the previous month and update its days.

If focus is on a day in DateChooser, move focus to the previous day. If focus is on the first day of a month, move focus to the last day of previous month. In addition, update name of the month and its days.

RIGHT arrow

Move the insertion point to the right within DateField if applicable. Move focus to DateChooser if open on right side of DateField.

If focus is on a month in DateChooser, go to the next month and update its days.

If focus is on a day in DateChooser, move focus to the next day. If focus is on the last day of a month, move focus to the first day of next month. In addition, update name of the month and its days.

 

3.4 Keyboard Support

The following table describes how keystrokes should be processed in case DateField has focus:

Keystroke Action
ESC If DateChooser is open, close DateChooser without updating DateField.
ENTER If focus is in DateField, perform default action.

If focus is in DateChooser, update DateField with the selected date and/or time and close DateChooser.
SPACE If focus is in DateChooser, select focused date and update DateField.
UP arrow Move focus to DateChooser if open above DateField.

If focus is in DateChooser, move focus up by one item.
DOWN arrow Move focus to DateChooser if open below DateField.

If focus is in DateChooser, move focus down by one item.
LEFT arrow

Move the insertion point to the left within DateField if applicable. Move focus to DateChooser if open on left side of DateField.

If focus is on a month in DateChooser, go to the previous month and update its days.

If focus is on a day in DateChooser, move focus to the previous day. If focus is on the first day of a month, move focus to the last day of previous month. In addition, update name of the month and its days.

RIGHT arrow

Move the insertion point to the right within DateField if applicable. Move focus to DateChooser if open on right side of DateField.

If focus is on a month in DateChooser, go to the next month and update its days.

If focus is on a day in DateChooser, move focus to the next day. If focus is on the last day of a month, move focus to the first day of next month. In addition, update name of the month and its days.

TAB Moves focus to the next focusable control.
SHIFT - TAB Moves focus to the previous focusable control.

For keyboard support of controls used in DatePicker control, please see the appropriate UE specs.