Configuration generator

Adjust the options, try the picker, and copy the JavaScript into a page with an text input with id="date-range".

Options

Dates and limits

Start date End date Earliest allowed Latest allowed Minimum span (days) Maximum span (days)

Calendars and presets

Selection mode

Include common presets Apply presets immediately Include Custom Range Always display calendars Link calendar navigation Month and year dropdowns Apply completed ranges automatically Write selection to input

First dropdown year Last dropdown year Week numbers

Time

Enable time selection 24-hour time Show seconds

Minute increment

Format and labels

Date format Range separator First weekday Text direction Apply button label Cancel button label Custom range label Week label

Weekday labels, starting with SundayMonth labels, starting with January

Placement and classes

Horizontal opening Vertical opening Parent selector Shared button classes Apply button classes Cancel button classes

Try this configuration ↑

Live preview

Date range

Configuration generator

Options

Live preview

Generated JavaScript