daterangepicker.js 40 KB

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