🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →


Progress value is 30%

Date Range

A controller for choosing date ranges.

View Demo


All components are based on CodyFrame.

If you're using this component, you should also include the SCSS/JS of the following components:

This component includes variations. Variations share the same SCSS/JS code but differ in their HTML.

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">
  <!-- ... -->
  • 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">
  <!-- ... -->
  • 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="-">
  <!-- ... -->

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>

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).

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us