1
# Date Range Picker for Twitter Bootstrap
3
![Improvely.com](http://i.imgur.com/LbAMf3D.png)
5
This date range picker component for Twitter Bootstrap creates a dropdown menu from which a user can
6
select a range of dates. I created it while building the UI for [Improvely](http://www.improvely.com),
7
which needed a way to select date ranges for reports.
9
If invoked with no options, it will present two calendars to choose a start
10
and end date from. Optionally, you can provide a list of date ranges the user can select from instead
11
of choosing dates from the calendars. If attached to a text input, the selected dates will be inserted
12
into the text box. Otherwise, you can provide a custom callback function to receive the selection.
14
**[View a demo](http://www.dangrossman.info/2012/08/20/a-date-range-picker-for-twitter-bootstrap/)**
16
**Note**: On May 6th, the date parsing library was switched from Date.js to moment.js. This change is
17
not backwards-compatible if you have specified custom date ranges.
21
This component relies on [Twitter Bootstrap](http://twitter.github.com/bootstrap/),
22
[Moment.js](http://momentjs.com/) and [jQuery](http://jquery.com/).
27
<script type="text/javascript" src="jquery.js"></script>
28
<script type="text/javascript" src="moment.js"></script>
29
<script type="text/javascript" src="daterangepicker.js"></script>
30
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
31
<link rel="stylesheet" type="text/css" href="daterangepicker.css" />
33
<script type="text/javascript">
34
$(document).ready(function() {
35
$('input[name="daterange"]').daterangepicker();
40
Additional options allow:
41
* Custom callback handler called when the date range selection is made
42
* Setting initial start and end dates for the calendars
43
* Overriding all labels in the interface with localized text
44
* Bounding the minimum and maximum selectable dates
45
* Starting the calendar week on any day of week
46
* Overriding the direction the dropdown expands (left/right of element it's attached to)
47
* Setting the date format string for parsing and printing dates
48
* Showing week numbers
49
* Maximum selectable range (i.e. 3 days, 1 week, 12 months)
50
* Month and year dropdowns
52
Syntax for all the options can be found in the examples.html file.
56
This code is made available under the same license as Twitter Bootstrap. Moment.js is included in this repository
57
for convenience. It is available under the [MIT license](http://www.opensource.org/licenses/mit-license.php).
61
Copyright 2012-2013 Dan Grossman
63
Licensed under the Apache License, Version 2.0 (the "License");
64
you may not use this file except in compliance with the License.
65
You may obtain a copy of the License at
67
http://www.apache.org/licenses/LICENSE-2.0
69
Unless required by applicable law or agreed to in writing, software
70
distributed under the License is distributed on an "AS IS" BASIS,
71
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
72
See the License for the specific language governing permissions and
73
limitations under the License.