Date range

Taxonomic name: M-DATE-RANGE


Archive - Updated 13/09/19. Current version



The ability to automatically set the maximum end date on selection of the start date to X day, X months or X years after the start date was added. The autosetMaxDate and autosetMaxDateValue settings were not available for use in previous releases.


Date selection using the native date field and date picker (where supported) has been deprecated and replaced with plain text input and a JavaScript date picker that is provided to all users. This change was made following evidence that users were struggling with the native date pickers provided in browser, causing increase error rates when attempting to complete form journeys using the date field.

For detailed documentation of the date range component using the native date field refrer to the deprecated page.

The styling of JavaScript datepicker for the deprecated version of the date input field has been updated to reflect the styling used for the new JavaScript datepicker.

Date range datepicker for older browsers in v.4.8.0


Dependency on jQuery removed.

Prior to v.4.6.0

To update the component settings after initial load the event updateSettings must be triggered on the m-date-range with a JavaScript object containing the required settings ie.

$( '#dateRange' ).trigger( 'updateSettings',
		autosetEndDate: true,
		autosetEndDateValue: [ 'month', 3 ],
		sameDay: false

Prior to v.4.0.0

Was part of the core styling so no additional CSS file(s) were required to be able to use this component.

Legends were wrapped with a span tag;.a-label class now applied directly to the legend tag.

<span class="a-label"><legend>...</legend></span>

has been replaced by:

<legend class="a-label">...</legend>

Prior to v.3.4.1

The date range would display the JavaScript datepicker, on browsers that natively support the date , at large screens.

Prior to v.3.1.0

The date range component was not configurable using a JavaScript variable and could not have any of its settings adjusted post setup.