Date Range

A controller for choosing date ranges.

Dependencies

• Custom Select
• Date Picker

How to

The Date Range component is used to select a range of dates from a calendar widget.

The calendar can be navigated using the keyboard (arrows to navigate through days, pageup/pagedown to navigate through months).

Additionally, two (visually hidden) input elements are used to improve SR accessibility (.js-date-range__text--start and .js-date-range__text--end).
Those input elements are updated each time a new date is selected in the calendar, so you can use their values for your form submission.

Options #

The Date Range component comes with the following customizations:

• Month labels: by default, the calendar widget shows the full English name of the months; if you wish to change this default (e.g., passing a short version of the label or using a different language), add a data-months attribute to the .date-range element with the comma-separated list of the labels you want to use:

<div class="date-range js-date-range" data-months="Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec">
  <!-- ... -->
</div>

• Date format: by default, the date format is 'dd/mm/yyyy'; if you want to change this order (e.g., yyyy/mm/dd), add a data-date-format attribute to the .date-range element with the new order you want to use:

<div class="date-range js-date-range" data-date-format="y-m-d">
  <!-- ... -->
</div>

• Date separator: by default, the slash ('/') is used as date separator; if you want to use a different character (e.g., '-'),  add a data-date-separator attribute to the .date-range element:

<div class="date-range js-date-range" data-date-separator="-">
  <!-- ... -->
</div>

Predefined Options Variation #

You can add a list of predefined options to the Date Range component. If user selects the 'Custom Range' option, the Date Range is revealed (see demo). 

You are free to customize the predefined list, as long as the custom range option has value equal to 'custom':

<select class="select__input form-control" name="selectThis" id="selectThis">
  <option value="0">Last Week</option>
  <!-- all your custom options here -->
  <option value="custom">Custom Range</option>
</select>

Dynamic Content #

You can dynamically initialize the Date Range component using the DateRange object:

var dateRange = document.getElementsByClassName('date-range')[0]; // your dynamically created date range
new DateRange({
  element: dateRange, // required
  // dateFormat: 'y-m-d', // if you want to pass a custom date format
  // dateSeparator: '-', // if you want to pass a custom date separator
  // months: 'Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec', // if you want to pass a custom list of month labels
});

Preslected Dates #

If you want to prefill your Date Range component with a start and end date, use the two (visually hidden) input elements .js-date-range__text--start and .js-date-range__text--end and set their value equal to the dates you want to use. Make sure to use the proper date format (e.g., dd/mm/yyyy).

Categories

• Forms > Form Elements

Bug report & feedback

Component Github page ↗