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:

Example

Choose a Date
1
June
2019

Accessibility Features

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

HTML Source Code