UNPKG

44.5 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>Date Range Picker for Bootstrap</title>
6 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
7 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
8 <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
9 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
10 <script src="moment.min.js"></script>
11
12 <script src="daterangepicker.js"></script>
13 <link rel="stylesheet" type="text/css" href="daterangepicker.css" />
14
15 <script src="website.js"></script>
16 <link rel="stylesheet" type="text/css" href="website.css" />
17
18 <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
19 <!--[if lt IE 9]>
20 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
21 <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
22 <![endif]-->
23
24 <meta name="google-site-verification" content="1fP-Eo9i1ozV4MUlqZv2vsLv1r7tvYutUb6i38v0_vg" />
25 </head>
26 <body>
27
28 <nav class="navbar navbar-inverse navbar-static-top">
29 <div class="container">
30 <ul class="nav navbar-nav">
31 <li>
32 <a href="http://www.daterangepicker.com" rel="nofollow" style="background: #eee; color: #000">
33 <span class="fa-stack">
34 <i class="fa fa-circle fa-stack-2x"></i>
35 <i class="fa fa-calendar fa-stack-1x fa-inverse" style="color: #eee"></i>
36 </span>
37 Date Range Picker
38 </a>
39 </li>
40 </ul>
41 <ul class="nav navbar-nav navbar-right">
42 <li>
43 <a href="http://www.websitegoodies.com" rel="nofollow" style="background: #f49a16">
44 <span class="fa-stack">
45 <i class="fa fa-circle fa-stack-2x"></i>
46 <i class="fa fa-wrench fa-stack-1x fa-inverse" style="color: #f49a16"></i>
47 </span>
48 Website Goodies
49 </a>
50 </li>
51 <li>
52 <a href="https://www.improvely.com" rel="nofollow" style="background: #00caff">
53 <span class="fa-stack">
54 <i class="fa fa-circle fa-stack-2x"></i>
55 <i class="fa fa-signal fa-stack-1x fa-inverse" style="color: #00caff"></i>
56 </span>
57 Improvely
58 </a>
59 </li>
60 <li>
61 <a href="https://www.w3counter.com" rel="nofollow" style="background: #009fe8">
62 <span class="fa-stack">
63 <i class="fa fa-circle fa-stack-2x"></i>
64 <i class="fa fa-pie-chart fa-stack-1x fa-inverse" style="color: #009fe8"></i>
65 </span>
66 W3Counter
67 </a>
68 </li>
69 <li>
70 <a href="https://www.visitorboost.com" rel="nofollow" style="background: #f55443">
71 <span class="fa-stack">
72 <i class="fa fa-circle fa-stack-2x"></i>
73 <i class="fa fa-line-chart fa-stack-1x fa-inverse" style="color: #f55443"></i>
74 </span>
75 Visitor Boost
76 </a>
77 </li>
78 </ul>
79 </div>
80 </nav>
81
82 <div id="jumbo">
83 <div class="container">
84 <div class="row">
85 <div class="col-md-6">
86
87 <h1 style="margin: 0 0 20px 0">Date Range Picker</h1>
88 <p style="font-size: 18px; margin-bottom: 0">
89 A JavaScript component for choosing date ranges.
90 <br />
91 Designed to work with the Bootstrap CSS framework.
92 </p>
93
94 </div>
95 <div class="col-md-6" style="text-align: right; padding-right: 0">
96
97 <a href="https://github.com/dangrossman/bootstrap-daterangepicker" class="btn btn-lg btn-default">View on GitHub</a>
98
99 &nbsp;
100
101 <a href="https://github.com/dangrossman/bootstrap-daterangepicker/archive/master.zip" class="btn btn-lg btn-success">Download ZIP</a>
102
103 <br /><br />
104
105 <iframe src="https://ghbtns.com/github-btn.html?user=dangrossman&repo=bootstrap-daterangepicker&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
106
107 <iframe src="https://ghbtns.com/github-btn.html?user=dangrossman&repo=bootstrap-daterangepicker&type=watch&count=true&size=large&v=2" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
108
109 <iframe src="https://ghbtns.com/github-btn.html?user=dangrossman&repo=bootstrap-daterangepicker&type=fork&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
110
111 </div>
112 </div>
113 </div>
114 </div>
115
116 <div class="container main">
117 <div class="row">
118
119 <div id="nav-spy">
120
121 <div id="sidebar">
122 <ul class="nav nav-pills nav-stacked">
123 <li><a href="#usage">Usage</a></li>
124 <li>
125 <a href="#examples">Examples</a>
126 <ul class="nav nav-pills nav-stacked" style="margin: 0 0 0 15px; padding: 0; font-size: 13px">
127 <li><a href="#ex1">Date Range Picker</a></li>
128 <li><a href="#ex2">Date and Time</a></li>
129 <li><a href="#ex3">Single Date Picker</a></li>
130 <li><a href="#ex4">Predefined Ranges</a></li>
131 <li><a href="#ex5">Input Initially Empty</a></li>
132 </ul>
133 </li>
134 <li><a href="#config">Configuration Generator</a></li>
135 <li><a href="#options">Options, Methods &amp; Events</a></li>
136 <li><a href="#license">License</a></li>
137 </ul>
138
139 <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
140 <!-- DRP 336x280 -->
141 <ins class="adsbygoogle"
142 style="display:inline-block;width:336px;height:280px"
143 data-ad-client="ca-pub-9095657276960731"
144 data-ad-slot="1626914594"></ins>
145 <script>
146 (adsbygoogle = window.adsbygoogle || []).push({});
147 </script>
148
149 </div>
150
151 </div>
152
153 <div id="rightcol">
154
155 <div id="overview" name="overview">
156
157 <p>
158 Originally built for reporting at <a href="https://www.improvely.com">Improvely</a>,
159 the Date Range Picker can be attached to any webpage element to pop up two calendars
160 for selecting dates, times, or from predefined ranges like "Last 30 Days".
161 </p>
162
163 <a style="display: block; height: 300px; background: url('drp.png') top right no-repeat; background-size: auto 100%; border: 1px solid #ccc; margin-bottom: 20px" href="https://awio.iljmp.com/5/drpdemo" title="Click for a Live Demo"></a>
164
165 </div>
166
167 <div id="usage" name="usage">
168
169 <h2>Usage</h2>
170
171 <p>
172 Date Range Picker relies on <a href="http://getbootstrap.com/">Bootstrap</a>, <a href="http://www.jquery.com/">jQuery</a> and <a href="http://momentjs.com/">Moment.js</a>.
173
174 Include the required scripts and stylesheet in your page:
175 </p>
176
177 <script src="https://gist.github.com/dangrossman/fc0ec04cf073f0834c97.js"></script>
178
179 <p>Then attach the picker to the element you want to trigger it:</p>
180
181 <script src="https://gist.github.com/dangrossman/c4cc05fff6fe86cdca05.js"></script>
182
183 <hr />
184
185 <p>
186 You can customize Date Range Picker with <a href="#options">options</a>, and
187 get notified when the user chooses new dates by providing a callback function.
188 </p>
189
190 <script src="https://gist.github.com/dangrossman/90b0b82275c81ac5904a.js"></script>
191
192 </div>
193
194 <div id="examples" name="examples">
195
196 <h2>Examples</h2>
197
198 <div id="ex1" name="ex1">
199
200 <h3>Date Range Picker</h3>
201
202 <p>
203 The Date Range Picker is attached to a text input. It will use the current
204 value of the input to initialize, and update the input if new dates are chosen.
205 </p>
206
207 <div class="row">
208 <div class="col-md-8 col-xs-12">
209 <script src="https://gist.github.com/dangrossman/8e97e05e68cb683c4d71.js"></script>
210 </div>
211 <div class="col-md-4 col-xs-12">
212 <h4>Demo:</h4>
213 <input class="pull-right" type="text" name="daterange" value="01/15/2015 - 02/15/2015" />
214 </div>
215 </div>
216
217 <script type="text/javascript">
218 $(function() {
219 $('input[name="daterange"]').daterangepicker();
220 });
221 </script>
222
223 </div>
224
225 <div id="ex2" name="ex2">
226
227 <h3>Date and Time</h3>
228
229 <p>
230 The Date Range Picker can also be used to select times. Hour, minute and (optional)
231 second dropdowns are added below the calendars. An option exists to set the increment
232 count of the minutes dropdown to e.g. offer only 15-minute or 30-minute increments.
233 </p>
234
235 <div class="row">
236 <div class="col-md-7 col-xs-12">
237 <script src="https://gist.github.com/dangrossman/89a40223f5a8a892fbf1.js"></script>
238 </div>
239 <div class="col-md-5 col-xs-12">
240 <h4>Demo:</h4>
241 <input class="pull-right" type="text" name="daterange2" value="01/01/2015 1:30 PM - 01/01/2015 2:00 PM" />
242 </div>
243 </div>
244
245 <script type="text/javascript">
246 $(function() {
247 $('input[name="daterange2"]').daterangepicker({
248 timePicker: true,
249 timePickerIncrement: 30,
250 locale: {
251 format: 'MM/DD/YYYY h:mm A'
252 }
253 });
254 });
255 </script>
256
257 </div>
258
259 <div id="ex3" name="ex3">
260
261 <h3>Single Date Picker</h3>
262
263 <p>
264 The Date Range Picker can be turned into a single date picker widget with only
265 one calendar. In this example, dropdowns to select a month and year have also
266 been enabled at the top of the calendar to quickly jump to different months.
267 </p>
268
269 <div class="row">
270 <div class="col-md-9 col-xs-12">
271 <script src="https://gist.github.com/dangrossman/df41977acae070b3feb2.js"></script>
272 </div>
273 <div class="col-md-3 col-xs-12">
274 <h4>Demo:</h4>
275 <input class="pull-right" type="text" name="birthdate" value="10/24/1984" />
276 </div>
277 </div>
278
279 <script type="text/javascript">
280 $(function() {
281 $('input[name="birthdate"]').daterangepicker({
282 singleDatePicker: true,
283 showDropdowns: true
284 },
285 function(start, end, label) {
286 var years = moment().diff(start, 'years');
287 alert("You are " + years + " years old.");
288 });
289 });
290 </script>
291
292 </div>
293
294 <div id="ex4" name="ex4">
295
296 <h3>Predefined Ranges</h3>
297
298 <p>
299 This example shows the option to predefine date ranges that
300 the user can choose from a list.
301 </p>
302
303 <div class="row">
304 <div class="col-md-8 col-xs-12">
305 <script src="https://gist.github.com/dangrossman/bd8cf6efbba1c2123adc.js"></script>
306 </div>
307 <div class="col-md-4 col-xs-12">
308 <h4>Demo:</h4>
309 <div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
310 <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
311 <span></span> <b class="caret"></b>
312 </div>
313 </div>
314 </div>
315
316 <script type="text/javascript">
317 $(function() {
318
319 function cb(start, end) {
320 $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
321 }
322 cb(moment().subtract(29, 'days'), moment());
323
324 $('#reportrange').daterangepicker({
325 ranges: {
326 'Today': [moment(), moment()],
327 'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
328 'Last 7 Days': [moment().subtract(6, 'days'), moment()],
329 'Last 30 Days': [moment().subtract(29, 'days'), moment()],
330 'This Month': [moment().startOf('month'), moment().endOf('month')],
331 'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
332 }
333 }, cb);
334
335 });
336 </script>
337
338 </div>
339
340 <div id="ex5" name="ex5">
341
342 <h3>Input Initially Empty</h3>
343
344 <p>
345 If you're using a date range as a filter, you may want to attach a picker to an
346 input but leave it empty by default. This example shows how to accomplish that
347 using the <code>autoUpdateInput</code> setting, and the <code>apply</code> and
348 <code>cancel</code> events.
349 </p>
350
351 <div class="row">
352 <div class="col-md-9 col-xs-12">
353 <script src="https://gist.github.com/dangrossman/de22909c4d24f3f3508c.js"></script>
354 </div>
355 <div class="col-md-3 col-xs-12">
356 <h4>Demo:</h4>
357 <input class="pull-right" type="text" name="datefilter" value="" />
358 </div>
359 </div>
360
361
362 </div>
363
364 <script type="text/javascript">
365 $(function() {
366
367 $('input[name="datefilter"]').daterangepicker({
368 autoUpdateInput: false,
369 locale: {
370 cancelLabel: 'Clear'
371 }
372 });
373
374 $('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
375 $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
376 });
377
378 $('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
379 $(this).val('');
380 });
381
382 });
383 </script>
384
385 </div>
386
387
388
389 <div id="config" name="config">
390
391 <h2>Configuration Generator</h2>
392
393 <div class="well configurator">
394
395 <form>
396 <div class="row">
397
398 <div class="col-md-4">
399
400 <div class="form-group">
401 <label for="parentEl">parentEl</label>
402 <input type="text" class="form-control" id="parentEl" value="" placeholder="body">
403 </div>
404
405 <div class="form-group">
406 <label for="startDate">startDate</label>
407 <input type="text" class="form-control" id="startDate" value="07/01/2015">
408 </div>
409
410 <div class="form-group">
411 <label for="endDate">endDate</label>
412 <input type="text" class="form-control" id="endDate" value="07/15/2015">
413 </div>
414
415 <div class="form-group">
416 <label for="minDate">minDate</label>
417 <input type="text" class="form-control" id="minDate" value="" placeholder="MM/DD/YYYY">
418 </div>
419
420 <div class="form-group">
421 <label for="maxDate">maxDate</label>
422 <input type="text" class="form-control" id="maxDate" value="" placeholder="MM/DD/YYYY">
423 </div>
424
425 </div>
426 <div class="col-md-4">
427
428 <div class="checkbox">
429 <label>
430 <input type="checkbox" id="autoApply"> autoApply
431 </label>
432 </div>
433
434 <div class="checkbox">
435 <label>
436 <input type="checkbox" id="singleDatePicker"> singleDatePicker
437 </label>
438 </div>
439
440 <div class="checkbox">
441 <label>
442 <input type="checkbox" id="showDropdowns"> showDropdowns
443 </label>
444 </div>
445
446 <div class="checkbox">
447 <label>
448 <input type="checkbox" id="showWeekNumbers"> showWeekNumbers
449 </label>
450 </div>
451
452 <div class="checkbox">
453 <label>
454 <input type="checkbox" id="showISOWeekNumbers"> showISOWeekNumbers
455 </label>
456 </div>
457
458 <div class="checkbox">
459 <label>
460 <input type="checkbox" id="timePicker"> timePicker
461 </label>
462 </div>
463
464 <div class="checkbox">
465 <label>
466 <input type="checkbox" id="timePicker24Hour"> timePicker24Hour
467 </label>
468 </div>
469
470 <div class="form-group">
471 <label for="timePickerIncrement">timePickerIncrement (in minutes)</label>
472 <input type="text" class="form-control" id="timePickerIncrement" value="1">
473 </div>
474
475 <div class="checkbox">
476 <label>
477 <input type="checkbox" id="timePickerSeconds"> timePickerSeconds
478 </label>
479 </div>
480
481 <div class="checkbox">
482 <label>
483 <input type="checkbox" id="dateLimit"> dateLimit (with example date range span)
484 </label>
485 </div>
486
487 <div class="checkbox">
488 <label>
489 <input type="checkbox" id="ranges"> ranges (with example predefined ranges)
490 </label>
491 </div>
492
493 <div class="checkbox">
494 <label>
495 <input type="checkbox" id="locale"> locale (with example settings)
496 </label>
497 </div>
498
499 <div class="checkbox">
500 <label>
501 <input type="checkbox" id="linkedCalendars" checked="checked"> linkedCalendars
502 </label>
503 </div>
504
505 <div class="checkbox">
506 <label>
507 <input type="checkbox" id="autoUpdateInput" checked="checked"> autoUpdateInput
508 </label>
509 </div>
510
511 <div class="checkbox">
512 <label>
513 <input type="checkbox" id="alwaysShowCalendars"> alwaysShowCalendars
514 </label>
515 </div>
516
517 </div>
518 <div class="col-md-4">
519
520 <div class="form-group">
521 <label for="opens">opens</label>
522 <select id="opens" class="form-control">
523 <option value="right" selected>right</option>
524 <option value="left">left</option>
525 <option value="center">center</option>
526 </select>
527 </div>
528
529 <div class="form-group">
530 <label for="drops">drops</label>
531 <select id="drops" class="form-control">
532 <option value="down" selected>down</option>
533 <option value="up">up</option>
534 </select>
535 </div>
536
537 <div class="form-group">
538 <label for="buttonClasses">buttonClasses</label>
539 <input type="text" class="form-control" id="buttonClasses" value="btn btn-sm">
540 </div>
541
542 <div class="form-group">
543 <label for="applyClass">applyClass</label>
544 <input type="text" class="form-control" id="applyClass" value="btn-success">
545 </div>
546
547 <div class="form-group">
548 <label for="cancelClass">cancelClass</label>
549 <input type="text" class="form-control" id="cancelClass" value="btn-default">
550 </div>
551
552 </div>
553
554 </div>
555 </form>
556
557 </div>
558
559 <div class="row">
560
561 <div class="col-md-4 col-md-offset-2 demo">
562 <h4>Your Date Range Picker</h4>
563 <input type="text" id="config-demo" class="form-control">
564 <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
565 </div>
566
567 <div class="col-md-6">
568 <h4>Configuration</h4>
569
570 <div class="well">
571 <textarea id="config-text" style="height: 300px; width: 100%; padding: 10px"></textarea>
572 </div>
573 </div>
574
575 </div>
576
577 </div>
578
579 <div id="options" name="options">
580
581 <h2>Options</h2>
582
583 <ul class="nobullets">
584 <li>
585 <code>startDate</code> (Date object, moment object or string) The start of the initially selected date range
586 </li>
587 <li>
588 <code>endDate</code>: (Date object, moment object or string) The end of the initially selected date range
589 </li>
590 <li>
591 <code>minDate</code>: (Date object, moment object or string) The earliest date a user may select
592 </li>
593 <li>
594 <code>maxDate</code>: (Date object, moment object or string) The latest date a user may select
595 </li>
596 <li>
597 <code>dateLimit</code>: (object) The maximum span between the selected start and end dates. Can have any property you can add to a moment object (i.e. days, months)
598 </li>
599 <li>
600 <code>showDropdowns</code>: (boolean) Show year and month select boxes above calendars to jump to a specific month and year
601 </li>
602 <li>
603 <code>showWeekNumbers</code>: (boolean) Show localized week numbers at the start of each week on the calendars
604 </li>
605 <li>
606 <code>showISOWeekNumbers</code>: (boolean) Show ISO week numbers at the start of each week on the calendars
607 </li>
608 <li>
609 <code>timePicker</code>: (boolean) Allow selection of dates with times, not just dates
610 </li>
611 <li>
612 <code>timePickerIncrement</code>: (number) Increment of the minutes selection list for times (i.e. 30 to allow only selection of times ending in 0 or 30)
613 </li>
614 <li>
615 <code>timePicker24Hour</code>: (boolean) Use 24-hour instead of 12-hour times, removing the AM/PM selection
616 </li>
617 <li>
618 <code>timePickerSeconds</code>: (boolean) Show seconds in the timePicker
619 </li>
620 <li>
621 <code>ranges</code>: (object) Set predefined date ranges the user can select from. Each key is the label for the range, and its value an array with two dates representing the bounds of the range
622 </li>
623 <li>
624 <code>opens</code>: (string</code>: 'left'/'right'/'center') Whether the picker appears aligned to the left, to the right, or centered under the HTML element it's attached to
625 </li>
626 <li>
627 <code>drops</code>: (string</code>: 'down' or 'up') Whether the picker appears below (default) or above the HTML element it's attached to
628 </li>
629 <li>
630 <code>buttonClasses</code>: (array) CSS class names that will be added to all buttons in the picker
631 </li>
632 <li>
633 <code>applyClass</code>: (string) CSS class string that will be added to the apply button
634 </li>
635 <li>
636 <code>cancelClass</code>: (string) CSS class string that will be added to the cancel button
637 </li>
638 <li>
639 <code>locale</code>: (object) Allows you to provide localized strings for buttons and labels, customize the date display format, and change the first day of week for the calendars
640 </li>
641 <li>
642 <code>singleDatePicker</code>: (boolean) Show only a single calendar to choose one date, instead of a range picker with two calendars; the start and end dates provided to your callback will be the same single date chosen
643 </li>
644 <li>
645 <code>autoApply</code>: (boolean) Hide the apply and cancel buttons, and automatically apply a new date range as soon as two dates or a predefined range is selected
646 </li>
647 <li>
648 <code>linkedCalendars</code>: (boolean) When enabled, the two calendars displayed will always be for two sequential months (i.e. January and February), and both will be advanced when clicking the left or right arrows above the calendars. When disabled, the two calendars can be individually advanced and display any month/year.
649 </li>
650 <li>
651 <code>parentEl</code>: (string) jQuery selector of the parent element that the date range picker will be added to, if not provided this will be 'body'
652 </li>
653 <li>
654 <code>isInvalidDate</code>: (function) A function that is passed each date in the two
655 calendars before they are displayed, and may return true or false to indicate whether
656 that date should be available for selection or not.
657 </li>
658 <li>
659 <code>isCustomDate</code>: (function) A function that is passed each date in the two
660 calendars before they are displayed, and may return a string or array of CSS class names
661 to apply to that date's calendar cell.
662 </li>
663 <li>
664 <code>autoUpdateInput</code>: (boolean) Indicates whether the date range picker should
665 automatically update the value of an <code>&lt;input&gt;</code> element it's attached to
666 at initialization and when the selected dates change.
667 </li>
668 <li>
669 <code>alwaysShowCalendars</code>: (boolean) Normally, if you use the <code>ranges</code>
670 option to specify pre-defined date ranges, calendars for choosing a custom date range are not shown until the user clicks "Custom Range". When this option is set to true, the calendars for choosing a custom date range are always shown instead.
671 </li>
672 </ul>
673
674 </div>
675
676 <div id="methods" name="methods">
677
678 <h2>Methods</h2>
679
680 <p>
681 You can programmatically update the <code>startDate</code> and <code>endDate</code>
682 in the picker using the <code>setStartDate</code> and <code>setEndDate</code> methods.
683 You can access the Date Range Picker object and its functions and properties through
684 data properties of the element you attached it to.
685 </p>
686
687 <script src="https://gist.github.com/dangrossman/8ff9b1220c9b5682e8bd.js"></script>
688
689 <br />
690
691 <ul class="nobullets">
692 <li>
693 <code>setStartDate(Date/moment/string)</code>: Sets the date range picker's currently selected start date to the provided date
694 </li>
695 <li>
696 <code>setEndDate(Date/moment/string)</code>: Sets the date range picker's currently selected end date to the provided date
697 </li>
698 </ul>
699
700 <p style="margin: 0"><b>Example usage:</b></p>
701
702 <script src="https://gist.github.com/dangrossman/e1a8effbaeacb50a1e31.js"></script>
703
704 </div>
705
706 <div id="events" name="events">
707
708 <h2>Events</h2>
709
710 <p>
711 Several events are triggered on the element you attach the picker to, which you can listen for.
712 </p>
713
714 <ul class="nobullets">
715 <li>
716 <code>show.daterangepicker</code>: Triggered when the picker is shown
717 </li>
718 <li>
719 <code>hide.daterangepicker</code>: Triggered when the picker is hidden
720 </li>
721 <li>
722 <code>showCalendar.daterangepicker</code>: Triggered when the calendar(s) are shown
723 </li>
724 <li>
725 <code>hideCalendar.daterangepicker</code>: Triggered when the calendar(s) are hidden
726 </li>
727 <li>
728 <code>apply.daterangepicker</code>: Triggered when the apply button is clicked,
729 or when a predefined range is clicked
730 </li>
731 <li>
732 <code>cancel.daterangepicker</code>: Triggered when the cancel button is clicked
733 </li>
734 </ul>
735
736 <p>
737 Some applications need a "clear" instead of a "cancel" functionality, which can be achieved by changing the button label and watching for the cancel event:
738 </p>
739
740 <script src="https://gist.github.com/dangrossman/1bea78da703f2896564d.js"></script>
741
742 <br />
743
744 <p>
745 While passing in a callback to the constructor is the easiest way to listen for changes in the selected date range, you can also do something every time the apply button is clicked even if the selection hasn't changed:
746 </p>
747
748 <script src="https://gist.github.com/dangrossman/0c6c911fea1459b5fd13.js"></script>
749
750 </div>
751
752 <div id="license" name="license">
753
754 <h2>License</h2>
755
756 <p>The MIT License (MIT)</p>
757
758 <p>Copyright (c) 2012-2015 <a href="http://www.dangrossman.info">Dan Grossman</a></p>
759
760 <p>
761 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
762 </p>
763
764 <p>
765 The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
766 </p>
767
768 <p>
769 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
770 </p>
771
772 </div>
773
774 <div id="comments">
775
776 <h2>Comments</h2>
777
778 <div id="disqus_thread"></div>
779 <script type="text/javascript">
780 /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
781 var disqus_url = 'http://www.dangrossman.info/2012/08/20/a-date-range-picker-for-twitter-bootstrap/';
782 var disqus_identifier = '1045 http://www.dangrossman.info/?p=1045';
783 var disqus_container_id = 'disqus_thread';
784 var disqus_shortname = 'dangrossman';
785 var disqus_title = "A Date Range Picker for Bootstrap";
786
787 /* * * DON'T EDIT BELOW THIS LINE * * */
788 (function() {
789 var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
790 dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
791 (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
792 })();
793 </script>
794 <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
795
796 </div>
797
798 </div>
799
800 </div>
801 </div>
802
803 <!-- Begin W3Counter Tracking Code -->
804 <script type="text/javascript" src="https://www.w3counter.com/tracker.js"></script>
805 <script type="text/javascript">
806 w3counter(90840);
807 </script>
808 <noscript>
809 <div><a href="http://www.w3counter.com"><img src="https://www.w3counter.com/tracker.php?id=90840" style="border: 0" alt="W3Counter" /></a></div>
810 </noscript>
811 <!-- End W3Counter Tracking Code -->
812
813 <script type="text/javascript">
814 var im_domain = 'awio';
815 var im_project_id = 48;
816 (function(e,t){window._improvely=[];var n=e.getElementsByTagName("script")[0];var r=e.createElement("script");r.type="text/javascript";r.src="https://"+im_domain+".iljmp.com/improvely.js";r.async=true;n.parentNode.insertBefore(r,n);if(typeof t.init=="undefined"){t.init=function(e,t){window._improvely.push(["init",e,t])};t.goal=function(e){window._improvely.push(["goal",e])};t.conversion=function(e){window._improvely.push(["conversion",e])};t.label=function(e){window._improvely.push(["label",e])}}window.improvely=t;t.init(im_domain,im_project_id)})(document,window.improvely||[])
817 </script>
818
819 <script type="text/javascript">
820 Shopify = { shop: 'www.improvely.com' };
821 </script>
822 <script type="text/javascript" src="https://icf.improvely.com/icf-button.js?shop=www.improvely.com"></script>
823
824 <div id="footer">
825 Copyright &copy; 2015 <a href="http://www.awio.com">Awio Web Services LLC</a>.
826 &nbsp;
827 Developed and maintained by <a href="http://www.dangrossman.info/">Dan Grossman</a>.
828 &nbsp;
829 </div>
830
831 </body>
832</html>