Date Picker Spin Button Example

The following example uses the Spin Button Design Pattern to implement a date picker. It includes three spin buttons: one for setting the day, a second for month, and a third for year.

Similar examples include:

Toolbar Example: A toolbar that contains a spin button for setting font size.
Date Picker Dialog Example: Demonstrates a dialog containing a calendar grid for choosing a date.

Example

Choose a Date

June

2019

Accessibility Features

The three spin buttons are wrapped in a group to help assistive technology users understand that all three elements together represent a date. The accessible name for the group includes a hidden div that contains a date string that reflects the current values of the three spin buttons. This enables screen reader users to easily perceive the date represented by the three buttons without having to navigate to all three buttons and remember the value of each one; it is the screen reader user equivalent to seeing the date at a glance.
The day spin button uses aria-valuetext to properly pronounce the day. e.g. first, second, third ...
The month spin button uses aria-valuetext to properly pronounce the month instead of the numeric value. e.g. January, February, ...
On hover, the up and down arrow images enlarge slightly, enlarging the effective target area for increasing or decreasing the spin button value.
Focusing a spin button enlarges the increase and decrease buttons to make perceiving keyboard focus easier.
The increase and decrease buttons are not contained within the div with role spinbutton so they can be separately focusable by users of touch screen readers. However, they are excluded from the page Tab sequence with tabindex="-1" because they are redundant with the arrow key support provided to keyboard users.

Keyboard Support

The spin buttons provide the following keyboard support described in the spin button design pattern.

Key	Function
`Down Arrow`	Decreases value 1 step. When focus is on the Day spin button and the value is the first day of the month, changes value to the last day of the month. When focus is on the Month spin button and the value is January, changes value to December.
`Up Arrow`	Increases the value 1 step. When focus is on the Day spin button and the value is the last day of the month, changes value to the first day of the month. When focus is on the Month spin button and the value is December, changes value to January.
`Page Down`	Decreases the value 5 steps. When focus is on the Day spin button and the value is the fifth day of the month or less, changes value to the last day of the month. When focus is on the Month spin button and the value is the fifth month of the year or less, changes value to December.
`Page Up`	Increases the value 5 steps. When focus is on the Day spin button and the value is any of the last five days of the month, changes value to the first day of the month. When focus is on the Month spin button and the value is any of the last five months of the year, changes value to January.
`Home`	Decreases to minimum value.
`End`	Increases to maximum value.

Role, Property, State, and Tabindex Attributes

Role	Attribute	Element	Usage
`group`		`div`	Identifies the `div` as a group. The group provides a means to inform assistive technology users that the three spin buttons are all related to the single purpose of choosing a date.
	`aria-labelledby="IDREFs"`	`div`	Contains two IDs that reference the `div` elements that provide the accessible name for the group. One ID refers to the visible label Choose a Date. The second ID refers to a hidden `div` that contains a string specifying the current date represented by the values of the three spin buttons, which is updated by JavaScript as users change the values of the spin buttons.
`spinbutton`		`div`	Identifies the `div` element as a `spinbutton`.
	`aria-label="NAME_STRING"`	`div`	Defines the accessible name for each spin button (e.g. day, month and year).
	`aria-valuenow="NUMBER"`	`div`	Indicates the current numeric value of the spin button. Updated by JavaScript as users change the value of the spin button.
	`aria-valuetext="DAY_NUMBER_STRING"` or `aria-valuetext="MONTH_STRING"`	`div`	For the Day spin button, provides screen reader users with a friendlier pronunciation of the number of the day of the month (i.e. first instead of one). For the Month spin button, provides screen reader users with a friendlier announcement of the month (i.e., January instead of one).
	`aria-valuemin="NUMBER"`	`div`	Indicates the minimum allowed value for the spin button.
	`aria-valuemax="NUMBER"`	`div`	Indicates the maximum allowed value for the spin button. For the Day spin button, this property is updated based on the value of the Month spin button.
	`aria-hidden="true"`	`div.next` `div.previous`	For assistive technology users, hides the text showing the next and previous values that is displayed adjacent to the up and down arrow icons since it would otherwise add superfluous elements to the screen reader reading order that are likely to be more confusing than helpful.
	`aria-label="NAME_STRING"`	`button`	Defines the accessible name for each increase and decrease button (Next Day, Previous Day, Next Month, Previous Month, Next year, and Previous Year).
	`tabindex="-1"`	`button`	Removes the decrement and increment buttons from the page `Tab` sequence while keeping them focusable so they can be accessed with touch-based assistive technologies.

Javascript and CSS Source Code

CSS: datepicker-spinbuttons.css
Javascript:
- datepicker-spinbuttons.js
- spinbutton-date.js