A controller for choosing date ranges.
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.
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 (
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.
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
<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
var dateRange = document.getElementsByClassName('date-range'); // your dynamically created date range
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--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).