Calendar Date Picker

Interaction Specs

Interaction Specs: 
1. Choose Date Picker icon.

User hovers over the calendar ican and cursor state becomes a pointer.

2. Select Calendar by month date.

Drop down selection calendar appears.

The calendar drop-­‐down will appear, showing two months by default. The calendar on the left and right are where users can set the 'from' and 'to' dates and they should default to the current and next month, respectively.

3. Calendar year selection.

User can cycle through the months with arrow icons.

4. View Hover state.

Hover state on dates.

5. User can change the year with the drop down menu.
6. Select the dates.

Select start and end dates.

Selected state for date user are chosen.

7. Higlight selected dates.

Selected Date show highlighted.

As user is choosing the end date, all the dates in between the start and end dates will be highlighted in blue.

8. View the Date range.

Selected dates are shown in the text field.

Visual Specs

Visual Specs: 

Pattern Summary

Pattern Summary (Unity): 

Why Use This Pattern

Users are familiar with and understand how to use Date Picker. It helps them easily choose a date or date range for submitting information or filtering data.

What is the Solution

The Calendar Date Picker enables users to choose one or more dates from a graphical calendar presented in a single or multi-month interface. Another common Date Picker approach is to place the icon inside a text field. When the associated text field gains it focus, it will trigger the Date Picker.

  • By default, the Date Picker calendar opens in a small overlay after clicking on the calendar icon.
  • On activation, boxes with two monthly calendars are laid over the current page, prompting the user to select a date from each box.
  • The "From" and "To" dates need to be selected. After selecting the date range, a blue highlight will cover the dates on the calendar.

The calendar picker can be activated in a variety of ways:

  • When clicking a link to prompt date selection.
  • The user wants to easily choose a date or date range in order to submit, track, sort, or filter data.

VMware Date Standard

VMware date guideline as defined within the UI Text Standards from the R&D UX Design Team:

  • Use a numeric format, such as 10/13/2013, when dates appear in:
    • A long list
    • A list that is sorted chronologically
    • The text input box of a date picker
  • Write the date out in long form, for example October 13, 2013, when the date is used in a label ("Last login" or "Last refresh").
  • Within a datagrid, use your judgment to determine the best format for presenting the date.  The numerical form is easier for users to scan, while the long form might be more familiar to novice users.

When to Use This Pattern

  • The user wants to find or submit information based on a date or date range.
  • The user wants to easily choose a date or date range in order to submit, track, sort, or filter data.

Do Not Use This Pattern

  • When users are more familiar with another way to input a date. Some users prefer to manually input within a text field.
  • When the date can be more easily input by writing it as text, for example, birthdays several decades back.

Live Example

GUI Kit

GUI Kit contains all Unity Light theme patterns in vector format

Adobe Illustrator Download 2.1 MB
Vector PDF Download 2.7 MB

Updated November 2015