bootstrap-daterangepicker.js 38 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111
  1. /**
  2. * @version: 1.3.7
  3. * @author: Dan Grossman http://www.dangrossman.info/
  4. * @date: 2014-04-29
  5. * @copyright: Copyright (c) 2012-2014 Dan Grossman. All rights reserved.
  6. * @license: Licensed under Apache License v2.0. See http://www.apache.org/licenses/LICENSE-2.0
  7. * @website: http://www.improvely.com/
  8. *
  9. *
  10. * Modified to fit into Hue
  11. *
  12. */
  13. !function ($, moment) {
  14. var DateRangePicker = function (element, options, cb) {
  15. // by default, the daterangepicker element is placed at the bottom of HTML body
  16. this.parentEl = 'body';
  17. //element that triggered the date range picker
  18. this.element = $(element);
  19. //create the picker HTML object
  20. var DRPTemplate = '<div class="daterangepicker dropdown-menu show-calendar">' +
  21. '<div class="calendar left"></div>' +
  22. '<div class="calendar right"></div>' +
  23. '<div class="ranges">' +
  24. '</div>' +
  25. '<div class="range_inputs">' +
  26. '<hr/>' +
  27. '<div class="daterangepicker_start_input">' +
  28. '<label for="daterangepicker_start"></label>' +
  29. '<input class="input" type="text" name="daterangepicker_start" value="" disabled="disabled" />' +
  30. '</div>' +
  31. '<div class="daterangepicker_end_input">' +
  32. '<label for="daterangepicker_end"></label>' +
  33. '<input class="input" type="text" name="daterangepicker_end" value="" disabled="disabled" />' +
  34. '</div>' +
  35. '<div class="daterangepicker_interval_input">' +
  36. '<label for="daterangepicker_interval"></label>' +
  37. '<select class="input-small daterangepicker_interval_select" type="text" name="daterangepicker_interval_select" value="" style="margin-right: 6px">' +
  38. '<option value="+200MILLISECONDS">200 MILLIS</option>' +
  39. '<option value="+30SECONDS">30 SECS</option>' +
  40. '<option value="+5MINUTES">5 MIN</option>' +
  41. '<option value="+30MINUTES">30 MIN</option>' +
  42. '<option value="+1HOURS">1 HOUR</option>' +
  43. '<option value="+12HOURS">12 HOURS</option>' +
  44. '<option value="+1DAYS">1 DAY</option>' +
  45. '<option value="+7DAYS">7 DAYS</option>' +
  46. '<option value="+1MONTHS">1 MONTH</option>' +
  47. '<option value="+6MONTHS">6 MONTHS</option>' +
  48. '<option value="+1YEARS">1 YEAR</option>' +
  49. '<option value="">Custom</option>' +
  50. '</select>' +
  51. '<input class="input daterangepicker_interval" type="text" name="daterangepicker_interval" value="" />' +
  52. '</div>' +
  53. '<div style="float:right; margin-top: 23px">' +
  54. '<button class="cancelBtn"></button>&nbsp;' +
  55. '<button class="applyBtn" disabled="disabled"></button>' +
  56. '</div>' +
  57. '</div>' +
  58. '</div>';
  59. //custom options
  60. if (typeof options !== 'object' || options === null)
  61. options = {};
  62. this.parentEl = (typeof options === 'object' && options.parentEl && $(options.parentEl).length) ? $(options.parentEl) : $(this.parentEl);
  63. this.container = $(DRPTemplate).appendTo(this.parentEl);
  64. this.setOptions(options, cb);
  65. //apply CSS classes and labels to buttons
  66. var c = this.container;
  67. $.each(this.buttonClasses, function (idx, val) {
  68. c.find('button').addClass(val);
  69. });
  70. this.container.find('.daterangepicker_start_input label').html(this.locale.fromLabel);
  71. this.container.find('.daterangepicker_end_input label').html(this.locale.toLabel);
  72. this.container.find('.daterangepicker_interval_input label').html(this.locale.intervalLabel);
  73. if (this.applyClass.length)
  74. this.container.find('.applyBtn').addClass(this.applyClass);
  75. if (this.cancelClass.length)
  76. this.container.find('.cancelBtn').addClass(this.cancelClass);
  77. this.container.find('.applyBtn').html(this.locale.applyLabel);
  78. this.container.find('.cancelBtn').html(this.locale.cancelLabel);
  79. //event listeners
  80. this.container.find('.calendar')
  81. .on('click.daterangepicker', '.prev', $.proxy(this.clickPrev, this))
  82. .on('click.daterangepicker', '.next', $.proxy(this.clickNext, this))
  83. .on('click.daterangepicker', 'td.available', $.proxy(this.clickDate, this))
  84. .on('mouseenter.daterangepicker', 'td.available', $.proxy(this.enterDate, this))
  85. .on('mouseleave.daterangepicker', 'td.available', $.proxy(this.updateFormInputs, this))
  86. .on('change.daterangepicker', 'select.yearselect', $.proxy(this.updateMonthYear, this))
  87. .on('change.daterangepicker', 'select.monthselect', $.proxy(this.updateMonthYear, this))
  88. .on('change.daterangepicker', 'select.hourselect,select.minuteselect,select.secondselect,select.ampmselect', $.proxy(this.updateTime, this));
  89. this.container.find('.ranges')
  90. .on('click.daterangepicker', '.daterangepicker_start_input,.daterangepicker_end_input,.daterangepicker_interval_input', $.proxy(this.showCalendars, this))
  91. .on('click.daterangepicker', 'li', $.proxy(this.clickRange, this))
  92. .on('mouseenter.daterangepicker', 'li', $.proxy(this.enterRange, this))
  93. .on('mouseleave.daterangepicker', 'li', $.proxy(this.updateFormInputs, this));
  94. this.container.find('.range_inputs')
  95. .on('click.daterangepicker', 'button.applyBtn', $.proxy(this.clickApply, this))
  96. .on('click.daterangepicker', 'button.cancelBtn', $.proxy(this.clickCancel, this))
  97. .on('change.daterangepicker', 'select.daterangepicker_interval_select', $.proxy(this.updateIntervalFromSelect, this))
  98. .on('change.daterangepicker', 'input.daterangepicker_interval', $.proxy(this.updateIntervalFromInput, this))
  99. if (this.element.is('input')) {
  100. this.element.on({
  101. 'click.daterangepicker': $.proxy(this.show, this),
  102. 'focus.daterangepicker': $.proxy(this.show, this),
  103. 'keyup.daterangepicker': $.proxy(this.updateFromControl, this)
  104. });
  105. } else {
  106. this.element.on('click.daterangepicker', $.proxy(this.toggle, this));
  107. }
  108. };
  109. DateRangePicker.prototype = {
  110. constructor: DateRangePicker,
  111. setOptions: function (options, callback) {
  112. this.startDate = moment().startOf('day');
  113. this.endDate = moment().endOf('day');
  114. this.interval = '+30MINUTES';
  115. this.minDate = false;
  116. this.maxDate = false;
  117. this.dateLimit = false;
  118. this.showDropdowns = false;
  119. this.showWeekNumbers = false;
  120. this.timePicker = false;
  121. this.timePickerIncrement = 30;
  122. this.timePicker12Hour = true;
  123. this.singleDatePicker = false;
  124. this.ranges = {};
  125. this.opens = 'right';
  126. if (this.element.hasClass('pull-right'))
  127. this.opens = 'left';
  128. this.buttonClasses = ['btn', 'btn-small'];
  129. this.applyClass = 'btn-success';
  130. this.cancelClass = 'btn-default';
  131. this.format = 'MM/DD/YYYY';
  132. this.separator = ' - ';
  133. this.locale = {
  134. applyLabel: 'Apply',
  135. cancelLabel: 'Cancel',
  136. fromLabel: 'From',
  137. toLabel: 'To',
  138. intervalLabel: 'Interval',
  139. weekLabel: 'W',
  140. customRangeLabel: 'Custom Range',
  141. daysOfWeek: moment()._lang._weekdaysMin.slice(),
  142. monthNames: moment()._lang._monthsShort.slice(),
  143. firstDay: 0
  144. };
  145. this.cb = function () {
  146. };
  147. if (typeof options.format === 'string')
  148. this.format = options.format;
  149. if (typeof options.separator === 'string')
  150. this.separator = options.separator;
  151. if (typeof options.startDate === 'string')
  152. this.startDate = moment(options.startDate, this.format);
  153. if (typeof options.endDate === 'string')
  154. this.endDate = moment(options.endDate, this.format);
  155. if (typeof options.minDate === 'string')
  156. this.minDate = moment(options.minDate, this.format);
  157. if (typeof options.maxDate === 'string')
  158. this.maxDate = moment(options.maxDate, this.format);
  159. if (typeof options.startDate === 'object')
  160. this.startDate = moment(options.startDate);
  161. if (typeof options.endDate === 'object')
  162. this.endDate = moment(options.endDate);
  163. if (typeof options.minDate === 'object')
  164. this.minDate = moment(options.minDate);
  165. if (typeof options.maxDate === 'object')
  166. this.maxDate = moment(options.maxDate);
  167. if (typeof options.applyClass === 'string')
  168. this.applyClass = options.applyClass;
  169. if (typeof options.cancelClass === 'string')
  170. this.cancelClass = options.cancelClass;
  171. if (typeof options.dateLimit === 'object')
  172. this.dateLimit = options.dateLimit;
  173. if (typeof options.interval === 'string')
  174. this.interval = options.interval;
  175. // update day names order to firstDay
  176. if (typeof options.locale === 'object') {
  177. if (typeof options.locale.daysOfWeek === 'object') {
  178. // Create a copy of daysOfWeek to avoid modification of original
  179. // options object for reusability in multiple daterangepicker instances
  180. this.locale.daysOfWeek = options.locale.daysOfWeek.slice();
  181. }
  182. if (typeof options.locale.monthNames === 'object') {
  183. this.locale.monthNames = options.locale.monthNames.slice();
  184. }
  185. if (typeof options.locale.firstDay === 'number') {
  186. this.locale.firstDay = options.locale.firstDay;
  187. var iterator = options.locale.firstDay;
  188. while (iterator > 0) {
  189. this.locale.daysOfWeek.push(this.locale.daysOfWeek.shift());
  190. iterator--;
  191. }
  192. }
  193. if (typeof options.locale.applyLabel === 'string') {
  194. this.locale.applyLabel = options.locale.applyLabel;
  195. }
  196. if (typeof options.locale.cancelLabel === 'string') {
  197. this.locale.cancelLabel = options.locale.cancelLabel;
  198. }
  199. if (typeof options.locale.fromLabel === 'string') {
  200. this.locale.fromLabel = options.locale.fromLabel;
  201. }
  202. if (typeof options.locale.toLabel === 'string') {
  203. this.locale.toLabel = options.locale.toLabel;
  204. }
  205. if (typeof options.locale.intervalLabel === 'string') {
  206. this.locale.intervalLabel = options.locale.intervalLabel;
  207. }
  208. if (typeof options.locale.weekLabel === 'string') {
  209. this.locale.weekLabel = options.locale.weekLabel;
  210. }
  211. if (typeof options.locale.customRangeLabel === 'string') {
  212. this.locale.customRangeLabel = options.locale.customRangeLabel;
  213. }
  214. }
  215. if (typeof options.opens === 'string')
  216. this.opens = options.opens;
  217. if (typeof options.showWeekNumbers === 'boolean') {
  218. this.showWeekNumbers = options.showWeekNumbers;
  219. }
  220. if (typeof options.buttonClasses === 'string') {
  221. this.buttonClasses = [options.buttonClasses];
  222. }
  223. if (typeof options.buttonClasses === 'object') {
  224. this.buttonClasses = options.buttonClasses;
  225. }
  226. if (typeof options.showDropdowns === 'boolean') {
  227. this.showDropdowns = options.showDropdowns;
  228. }
  229. if (typeof options.singleDatePicker === 'boolean') {
  230. this.singleDatePicker = options.singleDatePicker;
  231. }
  232. if (typeof options.timePicker === 'boolean') {
  233. this.timePicker = options.timePicker;
  234. }
  235. if (typeof options.timePickerIncrement === 'number') {
  236. this.timePickerIncrement = options.timePickerIncrement;
  237. }
  238. if (typeof options.timePicker12Hour === 'boolean') {
  239. this.timePicker12Hour = options.timePicker12Hour;
  240. }
  241. var start, end, range;
  242. //if no start/end dates set, check if an input element contains initial values
  243. if (typeof options.startDate === 'undefined' && typeof options.endDate === 'undefined') {
  244. if ($(this.element).is('input[type=text]')) {
  245. var val = $(this.element).val();
  246. var split = val.split(this.separator);
  247. start = end = null;
  248. if (split.length == 2) {
  249. start = moment(split[0], this.format);
  250. end = moment(split[1], this.format);
  251. } else if (this.singleDatePicker) {
  252. start = moment(val, this.format);
  253. end = moment(val, this.format);
  254. }
  255. if (start !== null && end !== null) {
  256. this.startDate = start;
  257. this.endDate = end;
  258. }
  259. }
  260. }
  261. if (typeof options.ranges === 'object') {
  262. for (range in options.ranges) {
  263. start = moment(options.ranges[range][0]);
  264. end = moment(options.ranges[range][1]);
  265. // If we have a min/max date set, bound this range
  266. // to it, but only if it would otherwise fall
  267. // outside of the min/max.
  268. if (this.minDate && start.isBefore(this.minDate))
  269. start = moment(this.minDate);
  270. if (this.maxDate && end.isAfter(this.maxDate))
  271. end = moment(this.maxDate);
  272. // If the end of the range is before the minimum (if min is set) OR
  273. // the start of the range is after the max (also if set) don't display this
  274. // range option.
  275. if ((this.minDate && end.isBefore(this.minDate)) || (this.maxDate && start.isAfter(this.maxDate))) {
  276. continue;
  277. }
  278. this.ranges[range] = [start, end];
  279. }
  280. var list = '<ul>';
  281. for (range in this.ranges) {
  282. list += '<li>' + range + '</li>';
  283. }
  284. list += '<li>' + this.locale.customRangeLabel + '</li>';
  285. list += '</ul>';
  286. this.container.find('.ranges ul').remove();
  287. this.container.find('.ranges').prepend(list);
  288. }
  289. if (typeof callback === 'function') {
  290. this.cb = callback;
  291. }
  292. if (!this.timePicker) {
  293. this.startDate = this.startDate.startOf('day');
  294. this.endDate = this.endDate.endOf('day');
  295. }
  296. if (this.singleDatePicker) {
  297. this.opens = 'right';
  298. this.container.find('.calendar.right').show();
  299. this.container.find('.calendar.left').hide();
  300. this.container.find('.ranges').hide();
  301. if (!this.container.find('.calendar.right').hasClass('single'))
  302. this.container.find('.calendar.right').addClass('single');
  303. } else {
  304. this.container.find('.calendar.right').removeClass('single');
  305. this.container.find('.ranges').show();
  306. }
  307. this.oldStartDate = this.startDate.clone();
  308. this.oldEndDate = this.endDate.clone();
  309. this.oldChosenLabel = this.chosenLabel;
  310. this.leftCalendar = {
  311. month: moment([this.startDate.year(), this.startDate.month(), 1, this.startDate.hour(), this.startDate.minute(), this.startDate.second()]),
  312. calendar: []
  313. };
  314. this.rightCalendar = {
  315. month: moment([this.endDate.year(), this.endDate.month(), 1, this.endDate.hour(), this.endDate.minute(), this.endDate.second()]),
  316. calendar: []
  317. };
  318. if (this.opens == 'right') {
  319. //swap calendar positions
  320. var left = this.container.find('.calendar.left');
  321. var right = this.container.find('.calendar.right');
  322. left.removeClass('left').addClass('right');
  323. right.removeClass('right').addClass('left');
  324. }
  325. if (typeof options.ranges === 'undefined' && !this.singleDatePicker) {
  326. this.container.addClass('show-calendar');
  327. }
  328. this.container.addClass('opens' + this.opens);
  329. this.updateView();
  330. this.updateCalendars();
  331. },
  332. setStartDate: function (startDate) {
  333. if (typeof startDate === 'string')
  334. this.startDate = moment(startDate, this.format);
  335. if (typeof startDate === 'object')
  336. this.startDate = moment(startDate);
  337. if (!this.timePicker)
  338. this.startDate = this.startDate.startOf('day');
  339. this.oldStartDate = this.startDate.clone();
  340. this.updateView();
  341. this.updateCalendars();
  342. },
  343. setEndDate: function (endDate) {
  344. if (typeof endDate === 'string')
  345. this.endDate = moment(endDate, this.format);
  346. if (typeof endDate === 'object')
  347. this.endDate = moment(endDate);
  348. if (!this.timePicker)
  349. this.endDate = this.endDate.endOf('day');
  350. this.oldEndDate = this.endDate.clone();
  351. this.updateView();
  352. this.updateCalendars();
  353. },
  354. updateView: function () {
  355. this.leftCalendar.month.month(this.startDate.month()).year(this.startDate.year());
  356. this.rightCalendar.month.month(this.endDate.month()).year(this.endDate.year());
  357. this.updateFormInputs();
  358. },
  359. updateFormInputs: function () {
  360. this.container.find('input[name=daterangepicker_start]').val(this.startDate.format(this.format));
  361. this.container.find('input[name=daterangepicker_end]').val(this.endDate.format(this.format));
  362. this.container.find('input[name=daterangepicker_interval]').val(this.interval);
  363. if (this.container.find("select[name='daterangepicker_interval_select'] option[value='"+this.interval+"']").length > 0){
  364. this.container.find('select[name=daterangepicker_interval_select]').val(this.interval);
  365. }
  366. else {
  367. this.container.find('select[name=daterangepicker_interval_select]').val("");
  368. }
  369. if (this.startDate.isSame(this.endDate) || this.startDate.isBefore(this.endDate)) {
  370. this.container.find('button.applyBtn').removeAttr('disabled');
  371. } else {
  372. this.container.find('button.applyBtn').attr('disabled', 'disabled');
  373. }
  374. },
  375. updateFromControl: function () {
  376. if (!this.element.is('input')) return;
  377. if (!this.element.val().length) return;
  378. var dateString = this.element.val().split(this.separator),
  379. start = null,
  380. end = null;
  381. if (dateString.length === 2) {
  382. start = moment(dateString[0], this.format);
  383. end = moment(dateString[1], this.format);
  384. }
  385. if (this.singleDatePicker || start === null || end === null) {
  386. start = moment(this.element.val(), this.format);
  387. end = start;
  388. }
  389. if (end.isBefore(start)) return;
  390. this.oldStartDate = this.startDate.clone();
  391. this.oldEndDate = this.endDate.clone();
  392. this.startDate = start;
  393. this.endDate = end;
  394. if (!this.startDate.isSame(this.oldStartDate) || !this.endDate.isSame(this.oldEndDate))
  395. this.notify();
  396. this.updateCalendars();
  397. },
  398. notify: function () {
  399. this.updateView();
  400. this.cb(this.startDate, this.endDate, this.interval, this.chosenLabel);
  401. },
  402. move: function () {
  403. var parentOffset = { top: 0, left: 0 };
  404. if (!this.parentEl.is('body')) {
  405. parentOffset = {
  406. top: this.parentEl.offset().top - this.parentEl.scrollTop(),
  407. left: this.parentEl.offset().left - this.parentEl.scrollLeft()
  408. };
  409. }
  410. if (this.opens == 'left') {
  411. this.container.css({
  412. top: this.element.offset().top + this.element.outerHeight() - parentOffset.top,
  413. right: $(window).width() - this.element.offset().left - this.element.outerWidth() - parentOffset.left,
  414. left: 'auto'
  415. });
  416. if (this.container.offset().left < 0) {
  417. this.container.css({
  418. right: 'auto',
  419. left: 9
  420. });
  421. }
  422. } else {
  423. this.container.css({
  424. top: this.element.offset().top + this.element.outerHeight() - parentOffset.top,
  425. left: this.element.offset().left - parentOffset.left,
  426. right: 'auto'
  427. });
  428. if (this.container.offset().left + this.container.outerWidth() > $(window).width()) {
  429. this.container.css({
  430. left: 'auto',
  431. right: 0
  432. });
  433. }
  434. }
  435. },
  436. toggle: function (e) {
  437. if (this.element.hasClass('actives')) {
  438. this.hide();
  439. } else {
  440. this.show();
  441. }
  442. },
  443. show: function (e) {
  444. this.element.addClass('actives');
  445. this.container.show();
  446. this.move();
  447. // Create a click proxy that is private to this instance of datepicker, for unbinding
  448. this._outsideClickProxy = $.proxy(function (e) {
  449. this.outsideClick(e);
  450. }, this);
  451. // Bind global datepicker mousedown for hiding and
  452. $(document)
  453. .on('mousedown.daterangepicker', this._outsideClickProxy)
  454. // also explicitly play nice with Bootstrap dropdowns, which stopPropagation when clicking them
  455. .on('click.daterangepicker', '[data-toggle=dropdown]', this._outsideClickProxy)
  456. // and also close when focus changes to outside the picker (eg. tabbing between controls)
  457. .on('focusin.daterangepicker', this._outsideClickProxy);
  458. this.element.trigger('show.daterangepicker', this);
  459. },
  460. outsideClick: function (e) {
  461. var target = $(e.target);
  462. // if the page is clicked anywhere except within the daterangerpicker/button
  463. // itself then call this.hide()
  464. if (
  465. target.closest(this.element).length ||
  466. target.closest(this.container).length ||
  467. target.closest('.calendar-date').length
  468. ) return;
  469. this.hide();
  470. },
  471. hide: function (e) {
  472. $(document)
  473. .off('mousedown.daterangepicker', this._outsideClickProxy)
  474. .off('click.daterangepicker', this._outsideClickProxy)
  475. .off('focusin.daterangepicker', this._outsideClickProxy);
  476. this.element.removeClass('active');
  477. this.container.hide();
  478. if (!this.startDate.isSame(this.oldStartDate) || !this.endDate.isSame(this.oldEndDate))
  479. this.notify();
  480. this.oldStartDate = this.startDate.clone();
  481. this.oldEndDate = this.endDate.clone();
  482. this.element.trigger('hide.daterangepicker', this);
  483. },
  484. enterRange: function (e) {
  485. // mouse pointer has entered a range label
  486. var label = e.target.innerHTML;
  487. if (label == this.locale.customRangeLabel) {
  488. this.updateView();
  489. } else {
  490. var dates = this.ranges[label];
  491. this.container.find('input[name=daterangepicker_start]').val(dates[0].format(this.format));
  492. this.container.find('input[name=daterangepicker_end]').val(dates[1].format(this.format));
  493. }
  494. },
  495. showCalendars: function () {
  496. this.container.addClass('show-calendar');
  497. this.move();
  498. },
  499. hideCalendars: function () {
  500. //this.container.removeClass('show-calendar');
  501. },
  502. updateInputText: function () {
  503. if (this.element.is('input') && !this.singleDatePicker) {
  504. this.element.val(this.startDate.format(this.format) + this.separator + this.endDate.format(this.format));
  505. } else if (this.element.is('input')) {
  506. this.element.val(this.startDate.format(this.format));
  507. }
  508. },
  509. updateIntervalFromSelect: function () {
  510. this.interval = this.container.find('select[name=daterangepicker_interval_select]').val();
  511. this.container.find('input[name=daterangepicker_interval]').val(this.interval);
  512. },
  513. updateIntervalFromInput: function () {
  514. this.interval = this.container.find('input[name=daterangepicker_interval]').val();
  515. this.container.find('select[name=daterangepicker_interval_select]').val("");
  516. },
  517. clickRange: function (e) {
  518. var label = e.target.innerHTML;
  519. this.chosenLabel = label;
  520. if (label == this.locale.customRangeLabel) {
  521. this.showCalendars();
  522. } else {
  523. var dates = this.ranges[label];
  524. this.startDate = dates[0];
  525. this.endDate = dates[1];
  526. if (!this.timePicker) {
  527. this.startDate.startOf('day');
  528. this.endDate.endOf('day');
  529. }
  530. this.leftCalendar.month.month(this.startDate.month()).year(this.startDate.year()).hour(this.startDate.hour()).minute(this.startDate.minute()).second(this.startDate.second());
  531. this.rightCalendar.month.month(this.endDate.month()).year(this.endDate.year()).hour(this.endDate.hour()).minute(this.endDate.minute()).second(this.endDate.second());
  532. this.updateCalendars();
  533. this.updateInputText();
  534. this.hideCalendars();
  535. this.hide();
  536. this.element.trigger('apply.daterangepicker', this);
  537. }
  538. },
  539. clickPrev: function (e) {
  540. var cal = $(e.target).parents('.calendar');
  541. if (cal.hasClass('left')) {
  542. this.leftCalendar.month.subtract('month', 1);
  543. } else {
  544. this.rightCalendar.month.subtract('month', 1);
  545. }
  546. this.updateCalendars();
  547. },
  548. clickNext: function (e) {
  549. var cal = $(e.target).parents('.calendar');
  550. if (cal.hasClass('left')) {
  551. this.leftCalendar.month.add('month', 1);
  552. } else {
  553. this.rightCalendar.month.add('month', 1);
  554. }
  555. this.updateCalendars();
  556. },
  557. enterDate: function (e) {
  558. var title = $(e.target).attr('data-title');
  559. var row = title.substr(1, 1);
  560. var col = title.substr(3, 1);
  561. var cal = $(e.target).parents('.calendar');
  562. if (cal.hasClass('left')) {
  563. this.container.find('input[name=daterangepicker_start]').val(this.leftCalendar.calendar[row][col].format(this.format));
  564. } else {
  565. this.container.find('input[name=daterangepicker_end]').val(this.rightCalendar.calendar[row][col].format(this.format));
  566. }
  567. },
  568. clickDate: function (e) {
  569. var title = $(e.target).attr('data-title');
  570. var row = title.substr(1, 1);
  571. var col = title.substr(3, 1);
  572. var cal = $(e.target).parents('.calendar');
  573. var startDate, endDate;
  574. if (cal.hasClass('left')) {
  575. startDate = this.leftCalendar.calendar[row][col];
  576. endDate = this.endDate;
  577. if (typeof this.dateLimit === 'object') {
  578. var maxDate = moment(startDate).add(this.dateLimit).startOf('day');
  579. if (endDate.isAfter(maxDate)) {
  580. endDate = maxDate;
  581. }
  582. }
  583. } else {
  584. startDate = this.startDate;
  585. endDate = this.rightCalendar.calendar[row][col];
  586. if (typeof this.dateLimit === 'object') {
  587. var minDate = moment(endDate).subtract(this.dateLimit).startOf('day');
  588. if (startDate.isBefore(minDate)) {
  589. startDate = minDate;
  590. }
  591. }
  592. }
  593. if (this.singleDatePicker && cal.hasClass('left')) {
  594. endDate = startDate.clone();
  595. } else if (this.singleDatePicker && cal.hasClass('right')) {
  596. startDate = endDate.clone();
  597. }
  598. cal.find('td').removeClass('active');
  599. if (startDate.isSame(endDate) || startDate.isBefore(endDate)) {
  600. $(e.target).addClass('active');
  601. this.startDate = startDate;
  602. this.endDate = endDate;
  603. this.chosenLabel = this.locale.customRangeLabel;
  604. } else if (startDate.isAfter(endDate)) {
  605. $(e.target).addClass('active');
  606. var difference = this.endDate.diff(this.startDate);
  607. this.startDate = startDate;
  608. this.endDate = moment(startDate).add('ms', difference);
  609. this.chosenLabel = this.locale.customRangeLabel;
  610. }
  611. this.leftCalendar.month.month(this.startDate.month()).year(this.startDate.year());
  612. this.rightCalendar.month.month(this.endDate.month()).year(this.endDate.year());
  613. this.updateCalendars();
  614. if (!this.timePicker)
  615. endDate.endOf('day');
  616. if (this.singleDatePicker)
  617. this.clickApply();
  618. },
  619. clickApply: function (e) {
  620. this.updateInputText();
  621. this.hide();
  622. this.notify();
  623. this.element.trigger('apply.daterangepicker', this);
  624. },
  625. clickCancel: function (e) {
  626. this.startDate = this.oldStartDate;
  627. this.endDate = this.oldEndDate;
  628. this.chosenLabel = this.oldChosenLabel;
  629. this.updateView();
  630. this.updateCalendars();
  631. this.hide();
  632. this.element.trigger('cancel.daterangepicker', this);
  633. },
  634. updateMonthYear: function (e) {
  635. var isLeft = $(e.target).closest('.calendar').hasClass('left'),
  636. leftOrRight = isLeft ? 'left' : 'right',
  637. cal = this.container.find('.calendar.' + leftOrRight);
  638. // Month must be Number for new moment versions
  639. var month = parseInt(cal.find('.monthselect').val(), 10);
  640. var year = cal.find('.yearselect').val();
  641. this[leftOrRight + 'Calendar'].month.month(month).year(year);
  642. this.updateCalendars();
  643. },
  644. updateTime: function (e) {
  645. var cal = $(e.target).closest('.calendar'),
  646. isLeft = cal.hasClass('left');
  647. var hour = parseInt(cal.find('.hourselect').val(), 10);
  648. var minute = parseInt(cal.find('.minuteselect').val(), 10);
  649. var second = parseInt(cal.find('.secondselect').val(), 10);
  650. if (this.timePicker12Hour) {
  651. var ampm = cal.find('.ampmselect').val();
  652. if (ampm === 'PM' && hour < 12)
  653. hour += 12;
  654. if (ampm === 'AM' && hour === 12)
  655. hour = 0;
  656. }
  657. if (isLeft) {
  658. var start = this.startDate.clone();
  659. start.hour(hour);
  660. start.minute(minute);
  661. start.second(second);
  662. this.startDate = start;
  663. this.leftCalendar.month.hour(hour).minute(minute).second(second);
  664. } else {
  665. var end = this.endDate.clone();
  666. end.hour(hour);
  667. end.minute(minute);
  668. end.second(second);
  669. this.endDate = end;
  670. this.rightCalendar.month.hour(hour).minute(minute).second(second);
  671. }
  672. this.updateCalendars();
  673. this.updateFormInputs();
  674. },
  675. updateCalendars: function () {
  676. this.leftCalendar.calendar = this.buildCalendar(this.leftCalendar.month.month(), this.leftCalendar.month.year(), this.leftCalendar.month.hour(), this.leftCalendar.month.minute(), this.leftCalendar.month.second(), 'left');
  677. this.rightCalendar.calendar = this.buildCalendar(this.rightCalendar.month.month(), this.rightCalendar.month.year(), this.rightCalendar.month.hour(), this.rightCalendar.month.minute(), this.rightCalendar.month.second(), 'right');
  678. this.container.find('.calendar.left').empty().html(this.renderCalendar(this.leftCalendar.calendar, this.startDate, this.minDate, this.maxDate));
  679. this.container.find('.calendar.right').empty().html(this.renderCalendar(this.rightCalendar.calendar, this.endDate, this.startDate, this.maxDate));
  680. this.container.find('.ranges li').removeClass('active');
  681. var customRange = true;
  682. var i = 0;
  683. for (var range in this.ranges) {
  684. if (this.timePicker) {
  685. if (this.startDate.isSame(this.ranges[range][0]) && this.endDate.isSame(this.ranges[range][1])) {
  686. customRange = false;
  687. this.chosenLabel = this.container.find('.ranges li:eq(' + i + ')')
  688. .addClass('active').html();
  689. }
  690. } else {
  691. //ignore times when comparing dates if time picker is not enabled
  692. if (this.startDate.format('YYYY-MM-DD HH:mm:ss') == this.ranges[range][0].format('YYYY-MM-DD HH:mm:ss') && this.endDate.format('YYYY-MM-DD HH:mm:ss') == this.ranges[range][1].format('YYYY-MM-DD HH:mm:ss')) {
  693. customRange = false;
  694. this.chosenLabel = this.container.find('.ranges li:eq(' + i + ')')
  695. .addClass('active').html();
  696. }
  697. }
  698. i++;
  699. }
  700. if (customRange) {
  701. this.chosenLabel = this.container.find('.ranges li:last')
  702. .addClass('active').html();
  703. }
  704. },
  705. buildCalendar: function (month, year, hour, minute, second, side) {
  706. var firstDay = moment([year, month, 1]);
  707. var lastMonth = moment(firstDay).subtract('month', 1).month();
  708. var lastYear = moment(firstDay).subtract('month', 1).year();
  709. var daysInLastMonth = moment([lastYear, lastMonth]).daysInMonth();
  710. var dayOfWeek = firstDay.day();
  711. var i;
  712. //initialize a 6 rows x 7 columns array for the calendar
  713. var calendar = [];
  714. for (i = 0; i < 6; i++) {
  715. calendar[i] = [];
  716. }
  717. //populate the calendar with date objects
  718. var startDay = daysInLastMonth - dayOfWeek + this.locale.firstDay + 1;
  719. if (startDay > daysInLastMonth)
  720. startDay -= 7;
  721. if (dayOfWeek == this.locale.firstDay)
  722. startDay = daysInLastMonth - 6;
  723. var curDate = moment([lastYear, lastMonth, startDay, 12, minute, second]);
  724. var col, row;
  725. for (i = 0, col = 0, row = 0; i < 42; i++, col++, curDate = moment(curDate).add('hour', 24)) {
  726. if (i > 0 && col % 7 === 0) {
  727. col = 0;
  728. row++;
  729. }
  730. calendar[row][col] = curDate.clone().hour(hour);
  731. curDate.hour(12);
  732. }
  733. return calendar;
  734. },
  735. renderDropdowns: function (selected, minDate, maxDate) {
  736. var currentMonth = selected.month();
  737. var monthHtml = '<select class="monthselect">';
  738. var inMinYear = false;
  739. var inMaxYear = false;
  740. for (var m = 0; m < 12; m++) {
  741. if ((!inMinYear || m >= minDate.month()) && (!inMaxYear || m <= maxDate.month())) {
  742. monthHtml += "<option value='" + m + "'" +
  743. (m === currentMonth ? " selected='selected'" : "") +
  744. ">" + this.locale.monthNames[m] + "</option>";
  745. }
  746. }
  747. monthHtml += "</select>";
  748. var currentYear = selected.year();
  749. var maxYear = (maxDate && maxDate.year()) || (currentYear + 5);
  750. var minYear = (minDate && minDate.year()) || (currentYear - 50);
  751. var yearHtml = '<select class="yearselect">';
  752. for (var y = minYear; y <= maxYear; y++) {
  753. yearHtml += '<option value="' + y + '"' +
  754. (y === currentYear ? ' selected="selected"' : '') +
  755. '>' + y + '</option>';
  756. }
  757. yearHtml += '</select>';
  758. return monthHtml + yearHtml;
  759. },
  760. renderCalendar: function (calendar, selected, minDate, maxDate) {
  761. var html = '<div class="calendar-date">';
  762. html += '<table class="table-condensed">';
  763. html += '<thead>';
  764. html += '<tr>';
  765. // add empty cell for week number
  766. if (this.showWeekNumbers)
  767. html += '<th></th>';
  768. if (!minDate || minDate.isBefore(calendar[1][1])) {
  769. html += '<th class="prev available"><i class="fa fa-arrow-left icon-arrow-left glyphicon glyphicon-arrow-left"></i></th>';
  770. } else {
  771. html += '<th></th>';
  772. }
  773. var dateHtml = this.locale.monthNames[calendar[1][1].month()] + calendar[1][1].format(" YYYY");
  774. if (this.showDropdowns) {
  775. dateHtml = this.renderDropdowns(calendar[1][1], minDate, maxDate);
  776. }
  777. html += '<th colspan="5" class="month">' + dateHtml + '</th>';
  778. if (!maxDate || maxDate.isAfter(calendar[1][1])) {
  779. html += '<th class="next available"><i class="fa fa-arrow-right icon-arrow-right glyphicon glyphicon-arrow-right"></i></th>';
  780. } else {
  781. html += '<th></th>';
  782. }
  783. html += '</tr>';
  784. html += '<tr>';
  785. // add week number label
  786. if (this.showWeekNumbers)
  787. html += '<th class="week">' + this.locale.weekLabel + '</th>';
  788. $.each(this.locale.daysOfWeek, function (index, dayOfWeek) {
  789. html += '<th>' + dayOfWeek + '</th>';
  790. });
  791. html += '</tr>';
  792. html += '</thead>';
  793. html += '<tbody>';
  794. for (var row = 0; row < 6; row++) {
  795. html += '<tr>';
  796. // add week number
  797. if (this.showWeekNumbers)
  798. html += '<td class="week">' + calendar[row][0].week() + '</td>';
  799. for (var col = 0; col < 7; col++) {
  800. var cname = 'available ';
  801. cname += (calendar[row][col].month() == calendar[1][1].month()) ? '' : 'off';
  802. if ((minDate && calendar[row][col].isBefore(minDate, 'day')) || (maxDate && calendar[row][col].isAfter(maxDate, 'day'))) {
  803. cname = ' off disabled ';
  804. } else if (calendar[row][col].format('YYYY-MM-DD') == selected.format('YYYY-MM-DD')) {
  805. cname += ' active ';
  806. if (calendar[row][col].format('YYYY-MM-DD') == this.startDate.format('YYYY-MM-DD')) {
  807. cname += ' start-date ';
  808. }
  809. if (calendar[row][col].format('YYYY-MM-DD') == this.endDate.format('YYYY-MM-DD')) {
  810. cname += ' end-date ';
  811. }
  812. } else if (calendar[row][col] >= this.startDate && calendar[row][col] <= this.endDate) {
  813. cname += ' in-range ';
  814. if (calendar[row][col].isSame(this.startDate)) {
  815. cname += ' start-date ';
  816. }
  817. if (calendar[row][col].isSame(this.endDate)) {
  818. cname += ' end-date ';
  819. }
  820. }
  821. var title = 'r' + row + 'c' + col;
  822. html += '<td class="' + cname.replace(/\s+/g, ' ').replace(/^\s?(.*?)\s?$/, '$1') + '" data-title="' + title + '">' + calendar[row][col].date() + '</td>';
  823. }
  824. html += '</tr>';
  825. }
  826. html += '</tbody>';
  827. html += '</table>';
  828. html += '</div>';
  829. var i;
  830. if (this.timePicker) {
  831. html += '<div class="calendar-time">';
  832. html += '<select class="hourselect">';
  833. var start = 0;
  834. var end = 23;
  835. var selected_hour = selected.hour();
  836. if (this.timePicker12Hour) {
  837. start = 1;
  838. end = 12;
  839. if (selected_hour >= 12)
  840. selected_hour -= 12;
  841. if (selected_hour === 0)
  842. selected_hour = 12;
  843. }
  844. for (i = start; i <= end; i++) {
  845. if (i == selected_hour) {
  846. html += '<option value="' + i + '" selected="selected">' + i + '</option>';
  847. } else {
  848. html += '<option value="' + i + '">' + i + '</option>';
  849. }
  850. }
  851. html += '</select> : ';
  852. html += '<select class="minuteselect">';
  853. for (i = 0; i < 60; i += this.timePickerIncrement) {
  854. var num = i;
  855. if (num < 10)
  856. num = '0' + num;
  857. if (i == selected.minute()) {
  858. html += '<option value="' + i + '" selected="selected">' + num + '</option>';
  859. } else {
  860. html += '<option value="' + i + '">' + num + '</option>';
  861. }
  862. }
  863. html += '</select> : ';
  864. html += '<select class="secondselect">';
  865. for (i = 0; i < 60; i++) {
  866. var num = i;
  867. if (num < 10)
  868. num = '0' + num;
  869. if (i == selected.second()) {
  870. html += '<option value="' + i + '" selected="selected">' + num + '</option>';
  871. } else {
  872. html += '<option value="' + i + '">' + num + '</option>';
  873. }
  874. }
  875. html += '</select> ';
  876. if (this.timePicker12Hour) {
  877. html += '<select class="ampmselect">';
  878. if (selected.hour() >= 12) {
  879. html += '<option value="AM">AM</option><option value="PM" selected="selected">PM</option>';
  880. } else {
  881. html += '<option value="AM" selected="selected">AM</option><option value="PM">PM</option>';
  882. }
  883. html += '</select>';
  884. }
  885. html += '</div>';
  886. }
  887. return html;
  888. },
  889. remove: function () {
  890. this.container.remove();
  891. this.element.off('.daterangepicker');
  892. this.element.removeData('daterangepicker');
  893. }
  894. };
  895. $.fn.daterangepicker = function (options, cb) {
  896. this.each(function () {
  897. var el = $(this);
  898. if (el.data('daterangepicker'))
  899. el.data('daterangepicker').remove();
  900. el.data('daterangepicker', new DateRangePicker(el, options, cb));
  901. });
  902. return this;
  903. };
  904. }(window.jQuery, window.moment);