Loading. Please Wait.

A JavaScript component for choosing date ranges. Designed to work with the Bootstrap CSS framework. Originally built for reporting at Improvely, the Date Range Picker can be attached to any webpage element to pop up two calendars for selecting dates, times, or from predefined ranges like "Last 30 Days".

Date and Time

The Date Range Picker can also be used to select times. Hour, minute and (optional) second dropdowns are added below the calendars. An option exists to set the increment count of the minutes dropdown to e.g. offer only 15-minute or 30-minute increments.

Example

Single Date Picker

The Date Range Picker can also be used to select times. Hour, minute and (optional) second dropdowns are added below the calendars. An option exists to set the increment count of the minutes dropdown to e.g. offer only 15-minute or 30-minute increments.

Example

Predefined Ranges

This example shows the option to predefine date ranges that the user can choose from a list.

Example

Input Initially Empty

If you're using a date range as a filter, you may want to attach a picker to an input but leave it empty by default. This example shows how to accomplish that using the autoUpdateInput setting, and the apply and cancel events.

Example

Navbar Options

Header Layout

Sidebar Options

Content View

Footer Options

Main Color

Navbar

Sidebar