Date range picker component for Twitter Bootstrap
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 768 commits behind dangrossman:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Date Range Picker for Twitter Bootstrap

This date range picker component for Twitter Bootstrap creates a dropdown menu from which a user can select a range of dates. It was created for the reporting UI at Improvely.

If invoked with no options, it will present two calendars to choose a start and end date from. Optionally, you can provide a list of date ranges the user can select from instead of choosing dates from the calendars. If attached to a text input, the selected dates will be inserted into the text box. Otherwise, you can provide a custom callback function to receive the selection.

Live demo & option usage examples


This component relies on Twitter Bootstrap, Datejs and jQuery.

Basic usage:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="date.js"></script>
<script type="text/javascript" src="daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="daterangepicker.css" />

<script type="text/javascript">
$(document).ready(function() {


This code is made available under the Apache License v2.0, the same as Twitter Bootstrap.

Date.js is included in this repository for convenience. It is available under the MIT license.