Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Date range picker component for Twitter Bootstrap
JavaScript
branch: master

This branch is 4 commits ahead, 385 commits behind dangrossman:master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
README.md
daterangepicker.css
daterangepicker.js
examples.html
moment.js

README.md

Date Range Picker for Twitter Bootstrap, with Moment.js

We ( the folks at hull ) converted the really nice daterangepicker from Improvely to use moment.js, instead of date.js, since our stack uses it extensively. Nothing has been changed otherwise.

Improvely.com

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

Usage

This component relies on Twitter Bootstrap, moment.js and jQuery.

Basic usage:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="moment.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() {
  $('input[name="daterange"]').daterangepicker();
});
</script>

Additional options allow:

  • Setting initial start and end dates for the calendars
  • Bounding the minimum and maximum selectable dates
  • Overriding all labels in the interface with localized text
  • Starting the calendar week on any day of week
  • Overriding the direction the dropdown expands (left/right of element it's attached to)
  • Setting the date format string for parsing string inputs

Syntax for all the options can be found in the examples.html file.

License

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.

Something went wrong with that request. Please try again.