diff --git a/.gitignore b/.gitignore index be44f6b5..e312bef5 100644 --- a/.gitignore +++ b/.gitignore @@ -2,4 +2,5 @@ bower_components node_modules npm-debug.log *.sublime-workspace -*.sublime-project \ No newline at end of file +*.sublime-project +*.sw[onp] diff --git a/README.md b/README.md index 315303ea..04145827 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,13 @@ -# Date Range Picker for Bootstrap +# Date Range Picker -![Improvely.com](http://i.imgur.com/LbAMf3D.png) +![Improvely.com](https://i.imgur.com/UTRlaar.png) -This date range picker component for Bootstrap creates a dropdown menu from which a user can +This date range picker component creates a dropdown menu from which a user can select a range of dates. I created it while building the UI for [Improvely](http://www.improvely.com), which needed a way to select date ranges for reports. Features include limiting the selectable date range, localizable strings and date formats, -a single date picker mode, optional time picker (for e.g. making appointments or reservations), -and styles that match the default Bootstrap 3 theme. +a single date picker mode, a time picker, and predefined date ranges. ## [Documentation and Live Usage Examples](http://www.daterangepicker.com) @@ -16,14 +15,9 @@ and styles that match the default Bootstrap 3 theme. ## License -This code is made available under the same license as Bootstrap. Moment.js is included in this repository -for convenience. It is available under the [MIT license](http://www.opensource.org/licenses/mit-license.php). - --- - The MIT License (MIT) -Copyright (c) 2012-2015 Dan Grossman +Copyright (c) 2012-2019 Dan Grossman Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/bower.json b/bower.json index d79a6f65..f3b7ba65 100644 --- a/bower.json +++ b/bower.json @@ -1,5 +1,5 @@ { - "name": "bootstrap-daterangepicker", + "name": "daterangepicker", "main": [ "daterangepicker.js", "daterangepicker.css" @@ -14,7 +14,7 @@ "moment.min.js" ], "dependencies": { - "jquery": ">=1.10", + "jquery": "1.9.1 - 3", "moment": ">=2.9.0" } } diff --git a/daterangepicker.css b/daterangepicker.css index 0b5ab918..a9638049 100644 --- a/daterangepicker.css +++ b/daterangepicker.css @@ -1,186 +1,198 @@ -/** -* A stylesheet for use with Bootstrap 3.x -* @author: Dan Grossman http://www.dangrossman.info/ -* @copyright: Copyright (c) 2012-2015 Dan Grossman. All rights reserved. -* @license: Licensed under the MIT license. See http://www.opensource.org/licenses/mit-license.php -* @website: https://www.improvely.com/ -*/ - -/* Container Appearance */ - .daterangepicker { position: absolute; - background: #fff; + color: inherit; + background-color: #fff; + border-radius: 4px; + border: 1px solid #ddd; + width: 278px; + max-width: none; + padding: 0; + margin-top: 7px; top: 100px; left: 20px; - padding: 4px; - margin-top: 1px; - border-radius: 4px; - width:278px; + z-index: 3001; + display: none; + font-family: arial; + font-size: 15px; + line-height: 1em; } -.daterangepicker.opensleft:before { +.daterangepicker:before, .daterangepicker:after { position: absolute; - top: -7px; - right: 9px; display: inline-block; - border-right: 7px solid transparent; - border-bottom: 7px solid #ccc; - border-left: 7px solid transparent; border-bottom-color: rgba(0, 0, 0, 0.2); content: ''; } -.daterangepicker.opensleft:after { - position: absolute; +.daterangepicker:before { + top: -7px; + border-right: 7px solid transparent; + border-left: 7px solid transparent; + border-bottom: 7px solid #ccc; +} + +.daterangepicker:after { top: -6px; - right: 10px; - display: inline-block; border-right: 6px solid transparent; border-bottom: 6px solid #fff; border-left: 6px solid transparent; - content: ''; +} + +.daterangepicker.opensleft:before { + right: 9px; +} + +.daterangepicker.opensleft:after { + right: 10px; } .daterangepicker.openscenter:before { - position: absolute; - top: -7px; left: 0; right: 0; width: 0; margin-left: auto; margin-right: auto; - display: inline-block; - border-right: 7px solid transparent; - border-bottom: 7px solid #ccc; - border-left: 7px solid transparent; - border-bottom-color: rgba(0, 0, 0, 0.2); - content: ''; } .daterangepicker.openscenter:after { - position: absolute; - top: -6px; left: 0; right: 0; width: 0; margin-left: auto; margin-right: auto; - display: inline-block; - border-right: 6px solid transparent; - border-bottom: 6px solid #fff; - border-left: 6px solid transparent; - content: ''; } .daterangepicker.opensright:before { - position: absolute; - top: -7px; left: 9px; - display: inline-block; - border-right: 7px solid transparent; - border-bottom: 7px solid #ccc; - border-left: 7px solid transparent; - border-bottom-color: rgba(0, 0, 0, 0.2); - content: ''; } .daterangepicker.opensright:after { - position: absolute; - top: -6px; left: 10px; - display: inline-block; - border-right: 6px solid transparent; - border-bottom: 6px solid #fff; - border-left: 6px solid transparent; - content: ''; } -.daterangepicker.dropup{ - margin-top: -5px; +.daterangepicker.drop-up { + margin-top: -7px; } -.daterangepicker.dropup:before{ + +.daterangepicker.drop-up:before { top: initial; - bottom:-7px; + bottom: -7px; border-bottom: initial; border-top: 7px solid #ccc; } -.daterangepicker.dropup:after{ + +.daterangepicker.drop-up:after { top: initial; - bottom:-6px; + bottom: -6px; border-bottom: initial; border-top: 6px solid #fff; } -.daterangepicker.dropdown-menu { - max-width: none; - z-index: 3000; +.daterangepicker.single .daterangepicker .ranges, .daterangepicker.single .drp-calendar { + float: none; } -.daterangepicker.single .ranges, .daterangepicker.single .calendar { - float: none; +.daterangepicker.single .drp-selected { + display: none; +} + +.daterangepicker.show-calendar .drp-calendar { + display: block; } -.daterangepicker .calendar { +.daterangepicker.show-calendar .drp-buttons { + display: block; +} + +.daterangepicker.auto-apply .drp-buttons { + display: none; +} + +.daterangepicker .drp-calendar { display: none; max-width: 270px; - margin: 4px; } -.daterangepicker.show-calendar .calendar { - display: block; +.daterangepicker .drp-calendar.left { + padding: 8px 0 8px 8px; +} + +.daterangepicker .drp-calendar.right { + padding: 8px; } -.daterangepicker .calendar.single .calendar-table { +.daterangepicker .drp-calendar.single .calendar-table { border: none; } -/* Calendars */ +.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span { + color: #fff; + border: solid black; + border-width: 0 2px 2px 0; + border-radius: 0; + display: inline-block; + padding: 3px; +} + +.daterangepicker .calendar-table .next span { + transform: rotate(-45deg); + -webkit-transform: rotate(-45deg); +} -.daterangepicker .calendar th, .daterangepicker .calendar td { +.daterangepicker .calendar-table .prev span { + transform: rotate(135deg); + -webkit-transform: rotate(135deg); +} + +.daterangepicker .calendar-table th, .daterangepicker .calendar-table td { white-space: nowrap; text-align: center; + vertical-align: middle; min-width: 32px; + width: 32px; + height: 24px; + line-height: 24px; + font-size: 12px; + border-radius: 4px; + border: 1px solid transparent; + white-space: nowrap; + cursor: pointer; } .daterangepicker .calendar-table { - border: 1px solid #ddd; - padding: 4px; + border: 1px solid #fff; border-radius: 4px; - background: #fff; + background-color: #fff; } -.daterangepicker table { +.daterangepicker .calendar-table table { width: 100%; margin: 0; + border-spacing: 0; + border-collapse: collapse; } -.daterangepicker td, .daterangepicker th { - text-align: center; - width: 20px; - height: 20px; - border-radius: 4px; - white-space: nowrap; - cursor: pointer; +.daterangepicker td.available:hover, .daterangepicker th.available:hover { + background-color: #eee; + border-color: transparent; + color: inherit; } -.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date { - color: #999; - background: #fff; +.daterangepicker td.week, .daterangepicker th.week { + font-size: 80%; + color: #ccc; } -.daterangepicker td.disabled, .daterangepicker option.disabled { +.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date { + background-color: #fff; + border-color: transparent; color: #999; - cursor: not-allowed; - text-decoration: line-through; -} - -.daterangepicker td.available:hover, .daterangepicker th.available:hover { - background: #eee; } .daterangepicker td.in-range { - background: #ebf4f8; + background-color: #ebf4f8; + border-color: transparent; + color: #000; border-radius: 0; } @@ -198,13 +210,18 @@ .daterangepicker td.active, .daterangepicker td.active:hover { background-color: #357ebd; - border-color: #3071a9; + border-color: transparent; color: #fff; } -.daterangepicker td.week, .daterangepicker th.week { - font-size: 80%; - color: #ccc; +.daterangepicker th.month { + width: auto; +} + +.daterangepicker td.disabled, .daterangepicker option.disabled { + color: #999; + cursor: not-allowed; + text-decoration: line-through; } .daterangepicker select.monthselect, .daterangepicker select.yearselect { @@ -226,64 +243,73 @@ .daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect { width: 50px; - margin-bottom: 0; + margin: 0 auto; + background: #eee; + border: 1px solid #eee; + padding: 2px; + outline: 0; + font-size: 12px; } -.daterangepicker th.month { - width: auto; +.daterangepicker .calendar-time { + text-align: center; + margin: 4px auto 0 auto; + line-height: 30px; + position: relative; } -/* Text Input Above Each Calendar */ +.daterangepicker .calendar-time select.disabled { + color: #ccc; + cursor: not-allowed; +} -.daterangepicker .input-mini { - border: 1px solid #ccc; - border-radius: 4px; - color: #555; - display: block; - height: 30px; - line-height: 30px; +.daterangepicker .drp-buttons { + clear: both; + text-align: right; + padding: 8px; + border-top: 1px solid #ddd; + display: none; + line-height: 12px; vertical-align: middle; - margin: 0 0 5px 0; - padding: 0 6px 0 28px; - width: 100%; } -.daterangepicker .input-mini.active { - border: 1px solid #357ebd; +.daterangepicker .drp-selected { + display: inline-block; + font-size: 12px; + padding-right: 8px; } -.daterangepicker .daterangepicker_input i { - position: absolute; - left: 8px; - top: 8px; +.daterangepicker .drp-buttons .btn { + margin-left: 8px; + font-size: 12px; + font-weight: bold; + padding: 4px 8px; } -.daterangepicker .daterangepicker_input { - position: relative; +.daterangepicker.show-ranges.single.rtl .drp-calendar.left { + border-right: 1px solid #ddd; } -/* Time Picker */ - -.daterangepicker .calendar-time { - text-align: center; - margin: 5px auto; - line-height: 30px; - position: relative; - padding-left: 28px; +.daterangepicker.show-ranges.single.ltr .drp-calendar.left { + border-left: 1px solid #ddd; } -.daterangepicker .calendar-time select.disabled { - color: #ccc; - cursor: not-allowed; +.daterangepicker.show-ranges.rtl .drp-calendar.right { + border-right: 1px solid #ddd; } -/* Predefined Ranges */ +.daterangepicker.show-ranges.ltr .drp-calendar.left { + border-left: 1px solid #ddd; +} .daterangepicker .ranges { - font-size: 11px; float: none; - margin: 4px; text-align: left; + margin: 0; +} + +.daterangepicker.show-calendar .ranges { + margin-top: 8px; } .daterangepicker .ranges ul { @@ -294,72 +320,73 @@ } .daterangepicker .ranges li { - font-size: 13px; - background: #f5f5f5; - border: 1px solid #f5f5f5; - color: #08c; - padding: 3px 12px; - margin-bottom: 8px; - border-radius: 5px; + font-size: 12px; + padding: 8px 12px; cursor: pointer; } -.daterangepicker .ranges li.active, .daterangepicker .ranges li:hover { - background: #08c; - border: 1px solid #08c; +.daterangepicker .ranges li:hover { + background-color: #eee; +} + +.daterangepicker .ranges li.active { + background-color: #08c; color: #fff; } /* Larger Screen Styling */ @media (min-width: 564px) { - .daterangepicker{ + .daterangepicker { width: auto; } .daterangepicker .ranges ul { - width: 160px; + width: 140px; } + .daterangepicker.single .ranges ul { width: 100%; } - .daterangepicker .calendar.left .calendar-table { - border-right: none; - border-top-right-radius: 0; - border-bottom-right-radius: 0; + + .daterangepicker.single .drp-calendar.left { + clear: none; } - .daterangepicker .calendar.right .calendar-table { - border-left: none; - border-top-left-radius: 0; - border-bottom-left-radius: 0; + .daterangepicker.single .ranges, .daterangepicker.single .drp-calendar { + float: left; + } + + .daterangepicker { + direction: ltr; + text-align: left; } - .daterangepicker .calendar.left { + .daterangepicker .drp-calendar.left { clear: left; margin-right: 0; } - .daterangepicker.single .calendar.left { - clear: none; - } - .daterangepicker.single .ranges, - .daterangepicker.single .calendar{ - float:left; + + .daterangepicker .drp-calendar.left .calendar-table { + border-right: none; + border-top-right-radius: 0; + border-bottom-right-radius: 0; } - .daterangepicker .calendar.right { + .daterangepicker .drp-calendar.right { margin-left: 0; } - .daterangepicker .left .daterangepicker_input { - padding-right: 12px; + .daterangepicker .drp-calendar.right .calendar-table { + border-left: none; + border-top-left-radius: 0; + border-bottom-left-radius: 0; } - .daterangepicker .calendar.left .calendar-table { - padding-right: 12px; + .daterangepicker .drp-calendar.left .calendar-table { + padding-right: 8px; } - .daterangepicker .ranges, - .daterangepicker .calendar { + .daterangepicker .ranges, .daterangepicker .drp-calendar { float: left; } } @@ -367,9 +394,17 @@ @media (min-width: 730px) { .daterangepicker .ranges { width: auto; + } + + .daterangepicker .ranges { float: left; } - .daterangepicker .calendar.left { - clear: none; + + .daterangepicker.rtl .ranges { + float: right; + } + + .daterangepicker .drp-calendar.left { + clear: none !important; } } diff --git a/daterangepicker.js b/daterangepicker.js index 158d7fd9..6aac9665 100644 --- a/daterangepicker.js +++ b/daterangepicker.js @@ -1,39 +1,34 @@ /** -* @version: 2.1.17 +* @version: 3.0.5 * @author: Dan Grossman http://www.dangrossman.info/ -* @copyright: Copyright (c) 2012-2015 Dan Grossman. All rights reserved. +* @copyright: Copyright (c) 2012-2019 Dan Grossman. All rights reserved. * @license: Licensed under the MIT license. See http://www.opensource.org/licenses/mit-license.php -* @website: https://www.improvely.com/ +* @website: http://www.daterangepicker.com/ */ - -(function(root, factory) { - - if (typeof define === 'function' && define.amd) { - define(['moment', 'jquery', 'exports'], function(momentjs, $, exports) { - root.daterangepicker = factory(root, exports, momentjs, $); - }); - - } else if (typeof exports !== 'undefined') { - var momentjs = require('moment'); - var jQuery = (typeof window != 'undefined') ? window.jQuery : undefined; //isomorphic issue - if (!jQuery) { - try { - jQuery = require('jquery'); - if (!jQuery.fn) jQuery.fn = {}; //isomorphic issue - } catch (err) { - if (!jQuery) throw new Error('jQuery dependency not found'); - } - } - - factory(root, exports, momentjs, jQuery); - - // Finally, as a browser global. - } else { - root.daterangepicker = factory(root, {}, root.moment || moment, (root.jQuery || root.Zepto || root.ender || root.$)); - } - -}(this || {}, function(root, daterangepicker, moment, $) { // 'this' doesn't exist on a server - +// Following the UMD template https://github.com/umdjs/umd/blob/master/templates/returnExportsGlobal.js +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + // AMD. Make globaly available as well + define(['moment', 'jquery'], function (moment, jquery) { + if (!jquery.fn) jquery.fn = {}; // webpack server rendering + if (typeof moment !== 'function' && moment.default) moment = moment.default + return factory(moment, jquery); + }); + } else if (typeof module === 'object' && module.exports) { + // Node / Browserify + //isomorphic issue + var jQuery = (typeof window != 'undefined') ? window.jQuery : undefined; + if (!jQuery) { + jQuery = require('jquery'); + if (!jQuery.fn) jQuery.fn = {}; + } + var moment = (typeof window != 'undefined' && typeof window.moment != 'undefined') ? window.moment : require('moment'); + module.exports = factory(moment, jQuery); + } else { + // Browser globals + root.daterangepicker = factory(root.moment, root.jQuery); + } +}(this, function(moment, $) { var DateRangePicker = function(element, options, cb) { //default settings for options @@ -43,11 +38,15 @@ this.endDate = moment().endOf('day'); this.minDate = false; this.maxDate = false; - this.dateLimit = false; + this.maxSpan = false; this.autoApply = false; this.singleDatePicker = false; this.showDropdowns = false; + this.minYear = moment().subtract(100, 'year').format('YYYY'); + this.maxYear = moment().add(100, 'year').format('YYYY'); this.showWeekNumbers = false; + this.showISOWeekNumbers = false; + this.showCustomRangeLabel = true; this.timePicker = false; this.timePicker24Hour = false; this.timePickerIncrement = 1; @@ -66,11 +65,12 @@ this.drops = 'up'; this.buttonClasses = 'btn btn-sm'; - this.applyClass = 'btn-success'; - this.cancelClass = 'btn-default'; + this.applyButtonClasses = 'btn-primary'; + this.cancelButtonClasses = 'btn-default'; this.locale = { - format: 'MM/DD/YYYY', + direction: 'ltr', + format: moment.localeData().longDateFormat('L'), separator: ' - ', applyLabel: 'Apply', cancelLabel: 'Cancel', @@ -97,35 +97,22 @@ options = $.extend(this.element.data(), options); //html template for the picker UI - if (typeof options.template !== 'string') - options.template = '