Digital Office Automation System Backend
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

daterangepicker.js 40KB

il y a 2 mois
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);