Date - native date input variant

Notes for developers

The input must be of type date this enables the best experience for all users (in particular mobile user) as for modern browsers the user will get the native date control. For older browsers a JavaScript datepicker is enabled.

The input must have the attributes min and max, in the format YYYY-MM-DD, set to limit the date pickers to a date range.

When disabling the date input do not solely rely on the is-disabled class, ensure that the disabled attribute is set on the input field.

If the native form validation needs to be disabled set the novalidate attribute on the form.

Important messages

To help those using assistive technologies, make sure that success/error messages which need to be announced to users have their aria attributes updated to role="alert" and/or aria-live="assertive".

Update value, minimum and/or maximum dates post load

When using the date input the value, minimum and maximum date settings can be updated post initial load. To update the component the function setSettings must be called from the a-date input with a JavaScript object containing settings in the same format as below being passed into the function.

document.querySelector( '#dateInput' ).dateInput.setSettings(
{
	minDate: '2016-01-01',
	maxDate: '2018-01-01',
}
);

Using autocomplete

Users appreciate when websites save them time by automatically filling common fields like names, email addresses and other frequently used fields, plus it helps to reduce potential input errors, especially on virtual keyboards and small devices.

Browsers use many methods to determine which fields they can auto-populate based on previously specified data by the user, and you can give hints to the browser by providing both the name attribute and the autocomplete attribute on each input element.

Further details can be found in the developer notes on the form introduction page.

Changing locale settings

The date format and the accessible text behind the next and previous arrows can be updated for a particular locale.

en: {
	datepicker: {
		locale: 'en-gb',
		previousMonth: 'Previous month',
		nextMonth: 'Next month',
		weekdaysShort: ['S','M','T','W','T','F','S'],
	},
},

For more information on this, see our page on how to change locale settings within JavaScript.

Available date format locales are:
af, ar-ma, ar-sa, ar-tn, ar, az, be, bg, bn, bo, br, bs, ca, cs, cv, cy, da, de-at, de, dv, el, en-au, en-ca, en-gb, en-ie, en-nz, eo, es-do, es, et, eu, fa, fi, fo, fr-ca, fr-ch, fr, fy, gd, dl, he, hi, hr, hu, hy-am, id, id, it, ja, jv, ka, kk, km, ko, ky, lb, lo, lt, lv, me, mk, ml, mr, ms-my, ms, my, nb, ne, nl, nn, pa-in, pl, pt-br, pt, ro, ru, se, si, sk, sl, sq, sr-cyrl, sr, ss, sv, sw, ta, te, th, tl-ph, tlh, tr, tzl, tzm-latn, tzm, uk, uz, vi, x-pseudo, zh-cn, zh-tw

---

Notes for testers

• If the browser natively supports the date input the JavaScript datepicker will not be used.
• In IE11 the date icon will look fuzzy; this is a rendering issue with the browser when a background is on an element that has rounded corners.
• Depending on the browser's support of the date field, it may not limit the user to entering the date in a particular format; this is perfectly acceptable but the form must have validation in place to catch any errors with the dates entered and present an error message back to the user. This message does not have to be shown real-time, but can appear once the user has attempted to submit the form.
• Ensure that the field has a correctly associated label; this not only provides context to the field for assistive technology users, but also a larger clickable area to select the field. Clicking / pressing on the label should cause the date field to gain focus.
• Users should be able to copy and paste if necessary.
• Highlight today's date and the selected date with clear variation between them
• Users should be able to easily identify and distinguish between selectable and non-selectable dates, today's date, the selected date and weekends.
• The calendar should have a clear hover state to help users identify the correct date.
• For some applications, past dates may need to be disabled.
• Clickable / tappable area of each day should be an appropriate size.

---

Classes overview

The following table gives you a quick overview of the CSS classes that can be applied.