ARIA Date Picker Demo

Hint: click on button to show picker, or tab to it and press Enter.

The markup for the above is:

<label for="f" title="must be a date">Date</label>
<input id="f" name="departing" type="date"/>

Note that the label can be omitted if appropriate.

You also need to include the following in the head:

<link href="date.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="date.js"></script>

If the browser has disabled scripting, users can type in the date.

Implemented features:

• Tab/Shift Tab focus in and out of the control.
• Arrow Key Navigation moves to previous/next month.
• Page Up and Page Down Key Navigation moves to previous/next month.
• Home and End Key Navigation moves to first and last day of the month.
• Space or enter selects a day.
• Click also moves to focus to enable mixed mouse and key navigation.
• Click on Label or picker button to show picker
• Escape key or close button to hide picker

Missing features:

These aren't really needed for applications that just want to pick a date in the near future or near past.

• buttons for prev/next year
• Shift+Page Up and Shift+Page Down Key Navigation moves to previous/next year.
• Shift+Home and Shift+End Key Navigation moves to first and last day of the year.
• Range selection with space and Shift Arrow Keys
• Multiple selection with space and Ctrl Arrow Keys