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

Show/Hide Fixed

Header Layout

Show/Hide

Sidebar Options

Show/Hide
Fixed Aside

Content View

Footer Options

Show/Hide Fixed

Main Color

Primary
Info
Success
Warning
Danger

Navbar

Dark
Light
Like Main Color

Sidebar

Dark
Light
Like Main Color