Regular and Accessible Datepicker Settings

A HTML form datepicker in US date format
A HTML form accessible datepicker in US date format

Overview

The code generator creates dedicated datepickers for regular and accessible HTML forms. Both datepickers use default or localized messages for accessibility and for the title attributes of the datepicker elements. The placeholders below show the default messages. A "Locale ..." button for instant localization will come soon.

The datepicker settings panel allows to set the regular datepicker's trigger and size. Two regular datepicker sizes are available, large and small, for the fixed, fluid, and the responsive HTML form layout. Square-shaped touch keys offer finger-friendly touchscreen input. The code generator supplies the degraded form layout with the small datepicker.

The settings panel

Available Datepickers

Regular Datepicker

A click on a HTML date textfield or on a trigger button opens a datepicker and enables the user to select a date from a monthly calendar. The names of the days of the week are currently localized for 20 countries. Furthermore, the date settings allow to localize the names of the week days and to set the first day of week (Monday or Sunday). The datepicker is closed by a click on a calendar date or outside of the datepicker area. When the datepicker is closed after a date selection, the date textfield will show the selected date in the specified date format.

The datepicker trigger is a click on the
textfield.
A HTML form date textfield with a date picker
The datepicker trigger is a click on the
toggle button.
A HTML form date textfield with a date picker and a toggle button

The calendar handles (the arrows) allow to navigate the calendar. A handle is disabled (painted lightgray) if a click on it would exceed a given date range. Dates of adjacent months are painted gray, dates outside of a given range are rendered lightgray with no onclick and hover effects. In the above screenshots, a booking form created a date picker on January 5 as earliest arrival and red-painted current date.

Accessible Datepicker

The code generator wraps the accessible date textfield in a <fieldset>, turns the textfield label ("Arrival date" from above) into a <legend>, and adds a datepicker toggle button. The default "Type the date or use the date picker" and "Toggle date picker" labels dedicated to blind users are localized for currently 20 countries and can be changed in the datepicker settings panel.

The accessible HTML form date textfield toggled by a textfield click

A click on the toggle button clones hidden calendar markup and appends the clone to the date textfield in the DOM. Another click on the toggle button or a click on a date button removes again the calendar clone from the DOM. The code generator creates the monthly-calendar grid from native buttons. An active datepicker is keyboard accessible.

The accessible HTML form accessible datepicker toggled by a toggle button

Responsive Datepicker

Below are scaled-down screenshots from a form with a datepicker at different browser window widths. The left picture shows the large datepicker left-aligned with its date textfield. In the middle picture, the datepicker responds to the smaller window and floats to left. The right picture shows the degraded layout with a small datepicker. The large datepicker is finger-friendly, the small picker requires pointed fingers, but is still usable.

Datepicker in a wide form
container.
HTML form with responsive datepicker in a wide window
Floating datepicker in a
narrowed container.
HTML form with responsive datepicker in a smaller window
Degraded datepicker
as fallback.
Degraded HTML form layout with small datepicker

Datepicker Locales

The Chinese datepicker.
The HTML form Chinese datepicker
The Chinese accessible datepicker.
The HTML form Chinese accessible datepicker
The Czech datepicker.
A HTML form Czech datepicker
The Czech accessible datepicker.
A HTML form Czech accessible datepicker
The German datepicker.
A HTML form German datepicker
The German accessible datepicker.
A HTML form German accessible datepicker
The Dansk datepicker.
A HTML form Dansk datepicker
The Dansk accessible datepicker.
A HTML form Dansk accessible datepicker
The Estonian datepicker.
A HTML form Estonian datepicker
The Estonian accessible datepicker.
A HTML form Estonian accessible datepicker
The Spanish datepicker.
A HTML form Spanish datepicker
The Spanish accessible datepicker.
A HTML form Spanish accessible datepicker
The Finnish datepicker.
A HTML form Finnish datepicker
The Finnish accessible datepicker.
A HTML form Finnish accessible datepicker
The French datepicker.
A HTML form French datepicker
The French accessible datepicker.
A HTML form French accessible datepicker
The Hungarian datepicker.
A HTML form Hungarian datepicker
The Hungarian accessible datepicker.
A HTML form Hungarian accessible datepicker
The Italian datepicker.
A HTML form Italian datepicker
The Italian accessible datepicker.
A HTML form Italian accessible datepicker
The Latvian datepicker.
A HTML form Latvian datepicker
The Latvian accessible datepicker.
A HTML form Latvian accessible datepicker
The Dutch datepicker.
A HTML form Dutch datepicker
The Dutch accessible datepicker.
A HTML form Dutch accessible datepicker
The Norwegian datepicker.
A HTML form Norwegian datepicker
The Norwegian accessible datepicker.
A HTML form Norwegian accessible datepicker
The Polish datepicker.
A HTML form Polish datepicker
The Polish accessible datepicker.
A HTML form Polish accessible datepicker
The Portuguese datepicker.
A HTML form Portuguese datepicker
The Portuguese accessible datepicker.
A HTML form Portuguese accessible datepicker
The Romanian datepicker.
A HTML form Romanian datepicker
The Romanian accessible datepicker.
A HTML form Romanian accessible datepicker
The Russian datepicker.
A HTML form Russian datepicker
The Russian accessible datepicker.
A HTML form Russian accessible datepicker
The Swedish datepicker.
A HTML form Swedish datepicker
The Swedish accessible datepicker.
A HTML form Swedith accessible datepicker
The US datepicker.
A HTML form US datepicker
The US accessible datepicker.
A HTML form US accessible datepicker