bootstrap-daterangepicker-rails 0.1.0 → 0.1.1

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: b92c9c70b697ac756824c1210e8fde76a1458c51
4
- data.tar.gz: d79db35d791b5c97eb6345ad38328b9fff297cac
3
+ metadata.gz: 38149adb6bba193c1f7bd79997fa101181ec9c06
4
+ data.tar.gz: 7bb55ac88c91c1b21aeb426c8d0b4601d3125790
5
5
  SHA512:
6
- metadata.gz: f455fe1791563cc55cf5fbcf67b24653a3d44294583c8a1efa5724476a245f5b7c9224235b9a98b2398d4d6642ef66bc0c745c7a64356dab7f2ae4f37d419312
7
- data.tar.gz: c5a57cb7737aaa15bdec527146587884a5770aaf6f606226a77b0e152c0c58a120f056be17db46e87a69f319b94072ef4fe81df3c52b3c86c8420ed6fc7fdcb0
6
+ metadata.gz: 07ab50e4af4fb04246d335a320f80d884d1f254ed0d062b2014abb4e4b03047f6310de7ec27b551e8656948b9fce1121fc293b378dd5b2cbddb6e3f98c812d1b
7
+ data.tar.gz: 2073011c23eaf5f39278bdb1a04ad38b7ec1a7995a62bdfb78c0e6ed1395a71151e136017753c66eeff3a7ec84f5bacb201ef81db68c48b8892be9bf762652ac
data/README.md CHANGED
@@ -40,13 +40,22 @@ gem 'bootstrap-daterangepicker-rails'
40
40
  *= require bootstrap
41
41
  *= require daterangepicker-bs3
42
42
  */
43
+
44
+
45
+ # In your HTML file
43
46
 
47
+ <input type="text" class="daterange"/>
44
48
 
45
49
  <script type="text/javascript">
46
50
  $(document).ready(function() {
47
- $('input[name="daterange"]').daterangepicker();
51
+ $('input[class="daterange"]').daterangepicker();
48
52
  });
49
53
  </script>
54
+
55
+ # for a simple_form field just do something like this and include the above javascript
56
+
57
+ = f.input :field_name, html: { class: "daterange" }
58
+
50
59
  ```
51
60
 
52
61
  Additional options allow:
@@ -1,7 +1,7 @@
1
1
  module Bootstrap
2
2
  module Daterangepicker
3
3
  module Rails
4
- VERSION = '0.1.0'
4
+ VERSION = '0.1.1'
5
5
  end
6
6
  end
7
7
  end
@@ -1,12 +1,37 @@
1
1
  /**
2
- * @version: 1.3.8
2
+ * @version: 1.3.17
3
3
  * @author: Dan Grossman http://www.dangrossman.info/
4
- * @date: 2014-07-10
4
+ * @date: 2014-11-25
5
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
6
+ * @license: Licensed under the MIT license. See http://www.opensource.org/licenses/mit-license.php
7
7
  * @website: http://www.improvely.com/
8
8
  */
9
- !function ($, moment) {
9
+
10
+ (function(root, factory) {
11
+
12
+ if (typeof define === 'function' && define.amd) {
13
+ define(['moment', 'jquery', 'exports'], function(momentjs, $, exports) {
14
+ root.daterangepicker = factory(root, exports, momentjs, $);
15
+ });
16
+
17
+ } else if (typeof exports !== 'undefined') {
18
+ var momentjs = require('moment');
19
+ var jQuery;
20
+ try {
21
+ jQuery = require('jquery');
22
+ } catch (err) {
23
+ jQuery = window.jQuery;
24
+ if (!jQuery) throw new Error('jQuery dependency not found');
25
+ }
26
+
27
+ factory(root, exports, momentjs, jQuery);
28
+
29
+ // Finally, as a browser global.
30
+ } else {
31
+ root.daterangepicker = factory(root, {}, root.moment, (root.jQuery || root.Zepto || root.ender || root.$));
32
+ }
33
+
34
+ }(this, function(root, daterangepicker, moment, $) {
10
35
 
11
36
  var DateRangePicker = function (element, options, cb) {
12
37
 
@@ -21,17 +46,17 @@
21
46
 
22
47
  //create the picker HTML object
23
48
  var DRPTemplate = '<div class="daterangepicker dropdown-menu">' +
24
- '<div class="calendar left"></div>' +
25
- '<div class="calendar right"></div>' +
49
+ '<div class="calendar first left"></div>' +
50
+ '<div class="calendar second right"></div>' +
26
51
  '<div class="ranges">' +
27
52
  '<div class="range_inputs">' +
28
53
  '<div class="daterangepicker_start_input">' +
29
54
  '<label for="daterangepicker_start"></label>' +
30
- '<input class="input-mini" type="text" name="daterangepicker_start" value="" readonly="readonly" />' +
55
+ '<input class="input-mini" type="text" name="daterangepicker_start" value="" />' +
31
56
  '</div>' +
32
57
  '<div class="daterangepicker_end_input">' +
33
58
  '<label for="daterangepicker_end"></label>' +
34
- '<input class="input-mini" type="text" name="daterangepicker_end" value="" readonly="readonly" />' +
59
+ '<input class="input-mini" type="text" name="daterangepicker_end" value="" />' +
35
60
  '</div>' +
36
61
  '<button class="applyBtn" disabled="disabled"></button>&nbsp;' +
37
62
  '<button class="cancelBtn"></button>' +
@@ -68,16 +93,18 @@
68
93
  .on('click.daterangepicker', '.prev', $.proxy(this.clickPrev, this))
69
94
  .on('click.daterangepicker', '.next', $.proxy(this.clickNext, this))
70
95
  .on('click.daterangepicker', 'td.available', $.proxy(this.clickDate, this))
71
- .on('mouseenter.daterangepicker', 'td.available', $.proxy(this.enterDate, this))
96
+ .on('mouseenter.daterangepicker', 'td.available', $.proxy(this.hoverDate, this))
72
97
  .on('mouseleave.daterangepicker', 'td.available', $.proxy(this.updateFormInputs, this))
73
98
  .on('change.daterangepicker', 'select.yearselect', $.proxy(this.updateMonthYear, this))
74
99
  .on('change.daterangepicker', 'select.monthselect', $.proxy(this.updateMonthYear, this))
75
- .on('change.daterangepicker', 'select.hourselect,select.minuteselect,select.ampmselect', $.proxy(this.updateTime, this));
100
+ .on('change.daterangepicker', 'select.hourselect,select.minuteselect,select.secondselect,select.ampmselect', $.proxy(this.updateTime, this));
76
101
 
77
102
  this.container.find('.ranges')
78
103
  .on('click.daterangepicker', 'button.applyBtn', $.proxy(this.clickApply, this))
79
104
  .on('click.daterangepicker', 'button.cancelBtn', $.proxy(this.clickCancel, this))
80
105
  .on('click.daterangepicker', '.daterangepicker_start_input,.daterangepicker_end_input', $.proxy(this.showCalendars, this))
106
+ .on('change.daterangepicker', '.daterangepicker_start_input,.daterangepicker_end_input', $.proxy(this.inputsChanged, this))
107
+ .on('keydown.daterangepicker', '.daterangepicker_start_input,.daterangepicker_end_input', $.proxy(this.inputsKeydown, this))
81
108
  .on('click.daterangepicker', 'li', $.proxy(this.clickRange, this))
82
109
  .on('mouseenter.daterangepicker', 'li', $.proxy(this.enterRange, this))
83
110
  .on('mouseleave.daterangepicker', 'li', $.proxy(this.updateFormInputs, this));
@@ -102,6 +129,7 @@
102
129
 
103
130
  this.startDate = moment().startOf('day');
104
131
  this.endDate = moment().endOf('day');
132
+ this.timeZone = moment().zone();
105
133
  this.minDate = false;
106
134
  this.maxDate = false;
107
135
  this.dateLimit = false;
@@ -109,6 +137,7 @@
109
137
  this.showDropdowns = false;
110
138
  this.showWeekNumbers = false;
111
139
  this.timePicker = false;
140
+ this.timePickerSeconds = false;
112
141
  this.timePickerIncrement = 30;
113
142
  this.timePicker12Hour = true;
114
143
  this.singleDatePicker = false;
@@ -132,9 +161,9 @@
132
161
  toLabel: 'To',
133
162
  weekLabel: 'W',
134
163
  customRangeLabel: 'Custom Range',
135
- daysOfWeek: moment()._lang._weekdaysMin.slice(),
136
- monthNames: moment()._lang._monthsShort.slice(),
137
- firstDay: 0
164
+ daysOfWeek: moment.weekdaysMin(),
165
+ monthNames: moment.monthsShort(),
166
+ firstDay: moment.localeData()._week.dow
138
167
  };
139
168
 
140
169
  this.cb = function () { };
@@ -178,7 +207,6 @@
178
207
  if (typeof options.dateLimit === 'object')
179
208
  this.dateLimit = options.dateLimit;
180
209
 
181
- // update day names order to firstDay
182
210
  if (typeof options.locale === 'object') {
183
211
 
184
212
  if (typeof options.locale.daysOfWeek === 'object') {
@@ -192,12 +220,7 @@
192
220
  }
193
221
 
194
222
  if (typeof options.locale.firstDay === 'number') {
195
- this.locale.firstDay = options.locale.firstDay;
196
- var iterator = options.locale.firstDay;
197
- while (iterator > 0) {
198
- this.locale.daysOfWeek.push(this.locale.daysOfWeek.shift());
199
- iterator--;
200
- }
223
+ this.locale.firstDay = options.locale.firstDay;
201
224
  }
202
225
 
203
226
  if (typeof options.locale.applyLabel === 'string') {
@@ -246,12 +269,19 @@
246
269
 
247
270
  if (typeof options.singleDatePicker === 'boolean') {
248
271
  this.singleDatePicker = options.singleDatePicker;
272
+ if (this.singleDatePicker) {
273
+ this.endDate = this.startDate.clone();
274
+ }
249
275
  }
250
276
 
251
277
  if (typeof options.timePicker === 'boolean') {
252
278
  this.timePicker = options.timePicker;
253
279
  }
254
280
 
281
+ if (typeof options.timePickerSeconds === 'boolean') {
282
+ this.timePickerSeconds = options.timePickerSeconds;
283
+ }
284
+
255
285
  if (typeof options.timePickerIncrement === 'number') {
256
286
  this.timePickerIncrement = options.timePickerIncrement;
257
287
  }
@@ -260,18 +290,29 @@
260
290
  this.timePicker12Hour = options.timePicker12Hour;
261
291
  }
262
292
 
293
+ // update day names order to firstDay
294
+ if (this.locale.firstDay != 0) {
295
+ var iterator = this.locale.firstDay;
296
+ while (iterator > 0) {
297
+ this.locale.daysOfWeek.push(this.locale.daysOfWeek.shift());
298
+ iterator--;
299
+ }
300
+ }
301
+
263
302
  var start, end, range;
264
303
 
265
304
  //if no start/end dates set, check if an input element contains initial values
266
305
  if (typeof options.startDate === 'undefined' && typeof options.endDate === 'undefined') {
267
306
  if ($(this.element).is('input[type=text]')) {
268
- var val = $(this.element).val();
269
- var split = val.split(this.separator);
307
+ var val = $(this.element).val(),
308
+ split = val.split(this.separator);
309
+
270
310
  start = end = null;
311
+
271
312
  if (split.length == 2) {
272
313
  start = moment(split[0], this.format);
273
314
  end = moment(split[1], this.format);
274
- } else if (this.singleDatePicker) {
315
+ } else if (this.singleDatePicker && val !== "") {
275
316
  start = moment(val, this.format);
276
317
  end = moment(val, this.format);
277
318
  }
@@ -282,11 +323,27 @@
282
323
  }
283
324
  }
284
325
 
326
+ // bind the time zone used to build the calendar to either the timeZone passed in through the options or the zone of the startDate (which will be the local time zone by default)
327
+ if (typeof options.timeZone === 'string' || typeof options.timeZone === 'number') {
328
+ this.timeZone = options.timeZone;
329
+ this.startDate.zone(this.timeZone);
330
+ this.endDate.zone(this.timeZone);
331
+ } else {
332
+ this.timeZone = moment(this.startDate).zone();
333
+ }
334
+
285
335
  if (typeof options.ranges === 'object') {
286
336
  for (range in options.ranges) {
287
337
 
288
- start = moment(options.ranges[range][0]);
289
- end = moment(options.ranges[range][1]);
338
+ if (typeof options.ranges[range][0] === 'string')
339
+ start = moment(options.ranges[range][0], this.format);
340
+ else
341
+ start = moment(options.ranges[range][0]);
342
+
343
+ if (typeof options.ranges[range][1] === 'string')
344
+ end = moment(options.ranges[range][1], this.format);
345
+ else
346
+ end = moment(options.ranges[range][1]);
290
347
 
291
348
  // If we have a min/max date set, bound this range
292
349
  // to it, but only if it would otherwise fall
@@ -328,12 +385,18 @@
328
385
 
329
386
  if (this.singleDatePicker) {
330
387
  this.opens = 'right';
388
+ this.container.addClass('single');
331
389
  this.container.find('.calendar.right').show();
332
390
  this.container.find('.calendar.left').hide();
333
- this.container.find('.ranges').hide();
391
+ if (!this.timePicker) {
392
+ this.container.find('.ranges').hide();
393
+ } else {
394
+ this.container.find('.ranges .daterangepicker_start_input, .ranges .daterangepicker_end_input').hide();
395
+ }
334
396
  if (!this.container.find('.calendar.right').hasClass('single'))
335
397
  this.container.find('.calendar.right').addClass('single');
336
398
  } else {
399
+ this.container.removeClass('single');
337
400
  this.container.find('.calendar.right').removeClass('single');
338
401
  this.container.find('.ranges').show();
339
402
  }
@@ -343,21 +406,32 @@
343
406
  this.oldChosenLabel = this.chosenLabel;
344
407
 
345
408
  this.leftCalendar = {
346
- month: moment([this.startDate.year(), this.startDate.month(), 1, this.startDate.hour(), this.startDate.minute()]),
409
+ month: moment([this.startDate.year(), this.startDate.month(), 1, this.startDate.hour(), this.startDate.minute(), this.startDate.second()]),
347
410
  calendar: []
348
411
  };
349
412
 
350
413
  this.rightCalendar = {
351
- month: moment([this.endDate.year(), this.endDate.month(), 1, this.endDate.hour(), this.endDate.minute()]),
414
+ month: moment([this.endDate.year(), this.endDate.month(), 1, this.endDate.hour(), this.endDate.minute(), this.endDate.second()]),
352
415
  calendar: []
353
416
  };
354
417
 
355
- if (this.opens == 'right') {
418
+ if (this.opens == 'right' || this.opens == 'center') {
356
419
  //swap calendar positions
357
- var left = this.container.find('.calendar.left');
358
- var right = this.container.find('.calendar.right');
359
- left.removeClass('left').addClass('right');
360
- right.removeClass('right').addClass('left');
420
+ var first = this.container.find('.calendar.first');
421
+ var second = this.container.find('.calendar.second');
422
+
423
+ if (second.hasClass('single')) {
424
+ second.removeClass('single');
425
+ first.addClass('single');
426
+ }
427
+
428
+ first.removeClass('left').addClass('right');
429
+ second.removeClass('right').addClass('left');
430
+
431
+ if (this.singleDatePicker) {
432
+ first.show();
433
+ second.hide();
434
+ }
361
435
  }
362
436
 
363
437
  if (typeof options.ranges === 'undefined' && !this.singleDatePicker) {
@@ -373,7 +447,7 @@
373
447
 
374
448
  setStartDate: function(startDate) {
375
449
  if (typeof startDate === 'string')
376
- this.startDate = moment(startDate, this.format);
450
+ this.startDate = moment(startDate, this.format).zone(this.timeZone);
377
451
 
378
452
  if (typeof startDate === 'object')
379
453
  this.startDate = moment(startDate);
@@ -390,7 +464,7 @@
390
464
 
391
465
  setEndDate: function(endDate) {
392
466
  if (typeof endDate === 'string')
393
- this.endDate = moment(endDate, this.format);
467
+ this.endDate = moment(endDate, this.format).zone(this.timeZone);
394
468
 
395
469
  if (typeof endDate === 'object')
396
470
  this.endDate = moment(endDate);
@@ -431,12 +505,12 @@
431
505
  end = null;
432
506
 
433
507
  if(dateString.length === 2) {
434
- start = moment(dateString[0], this.format);
435
- end = moment(dateString[1], this.format);
508
+ start = moment(dateString[0], this.format).zone(this.timeZone);
509
+ end = moment(dateString[1], this.format).zone(this.timeZone);
436
510
  }
437
511
 
438
512
  if (this.singleDatePicker || start === null || end === null) {
439
- start = moment(this.element.val(), this.format);
513
+ start = moment(this.element.val(), this.format).zone(this.timeZone);
440
514
  end = start;
441
515
  }
442
516
 
@@ -461,17 +535,19 @@
461
535
 
462
536
  move: function () {
463
537
  var parentOffset = { top: 0, left: 0 };
538
+ var parentRightEdge = $(window).width();
464
539
  if (!this.parentEl.is('body')) {
465
540
  parentOffset = {
466
541
  top: this.parentEl.offset().top - this.parentEl.scrollTop(),
467
542
  left: this.parentEl.offset().left - this.parentEl.scrollLeft()
468
543
  };
544
+ parentRightEdge = this.parentEl[0].clientWidth + this.parentEl.offset().left;
469
545
  }
470
546
 
471
547
  if (this.opens == 'left') {
472
548
  this.container.css({
473
549
  top: this.element.offset().top + this.element.outerHeight() - parentOffset.top,
474
- right: $(window).width() - this.element.offset().left - this.element.outerWidth() - parentOffset.left,
550
+ right: parentRightEdge - this.element.offset().left - this.element.outerWidth(),
475
551
  left: 'auto'
476
552
  });
477
553
  if (this.container.offset().left < 0) {
@@ -480,6 +556,19 @@
480
556
  left: 9
481
557
  });
482
558
  }
559
+ } else if (this.opens == 'center') {
560
+ this.container.css({
561
+ top: this.element.offset().top + this.element.outerHeight() - parentOffset.top,
562
+ left: this.element.offset().left - parentOffset.left + this.element.outerWidth() / 2
563
+ - this.container.outerWidth() / 2,
564
+ right: 'auto'
565
+ });
566
+ if (this.container.offset().left < 0) {
567
+ this.container.css({
568
+ right: 'auto',
569
+ left: 9
570
+ });
571
+ }
483
572
  } else {
484
573
  this.container.css({
485
574
  top: this.element.offset().top + this.element.outerHeight() - parentOffset.top,
@@ -515,6 +604,8 @@
515
604
  // Bind global datepicker mousedown for hiding and
516
605
  $(document)
517
606
  .on('mousedown.daterangepicker', this._outsideClickProxy)
607
+ // also support mobile devices
608
+ .on('touchend.daterangepicker', this._outsideClickProxy)
518
609
  // also explicitly play nice with Bootstrap dropdowns, which stopPropagation when clicking them
519
610
  .on('click.daterangepicker', '[data-toggle=dropdown]', this._outsideClickProxy)
520
611
  // and also close when focus changes to outside the picker (eg. tabbing between controls)
@@ -529,6 +620,8 @@
529
620
  // if the page is clicked anywhere except within the daterangerpicker/button
530
621
  // itself then call this.hide()
531
622
  if (
623
+ // ie modal dialog fix
624
+ e.type == "focusin" ||
532
625
  target.closest(this.element).length ||
533
626
  target.closest(this.container).length ||
534
627
  target.closest('.calendar-date').length
@@ -540,9 +633,7 @@
540
633
  if (!this.isShowing) return;
541
634
 
542
635
  $(document)
543
- .off('mousedown.daterangepicker')
544
- .off('click.daterangepicker', '[data-toggle=dropdown]')
545
- .off('focusin.daterangepicker');
636
+ .off('.daterangepicker');
546
637
 
547
638
  this.element.removeClass('active');
548
639
  this.container.hide();
@@ -580,11 +671,35 @@
580
671
  this.element.trigger('hideCalendar.daterangepicker', this);
581
672
  },
582
673
 
674
+ // when a date is typed into the start to end date textboxes
675
+ inputsChanged: function (e) {
676
+ var el = $(e.target);
677
+ var date = moment(el.val(), this.format);
678
+ if (!date.isValid()) return;
679
+
680
+ var startDate, endDate;
681
+ if (el.attr('name') === 'daterangepicker_start') {
682
+ startDate = date;
683
+ endDate = this.endDate;
684
+ } else {
685
+ startDate = this.startDate;
686
+ endDate = date;
687
+ }
688
+ this.setCustomDates(startDate, endDate);
689
+ },
690
+
691
+ inputsKeydown: function(e) {
692
+ if (e.keyCode === 13) {
693
+ this.inputsChanged(e);
694
+ this.notify();
695
+ }
696
+ },
697
+
583
698
  updateInputText: function() {
584
699
  if (this.element.is('input') && !this.singleDatePicker) {
585
700
  this.element.val(this.startDate.format(this.format) + this.separator + this.endDate.format(this.format));
586
701
  } else if (this.element.is('input')) {
587
- this.element.val(this.startDate.format(this.format));
702
+ this.element.val(this.endDate.format(this.format));
588
703
  }
589
704
  },
590
705
 
@@ -619,9 +734,9 @@
619
734
  clickPrev: function (e) {
620
735
  var cal = $(e.target).parents('.calendar');
621
736
  if (cal.hasClass('left')) {
622
- this.leftCalendar.month.subtract('month', 1);
737
+ this.leftCalendar.month.subtract(1, 'month');
623
738
  } else {
624
- this.rightCalendar.month.subtract('month', 1);
739
+ this.rightCalendar.month.subtract(1, 'month');
625
740
  }
626
741
  this.updateCalendars();
627
742
  },
@@ -629,15 +744,14 @@
629
744
  clickNext: function (e) {
630
745
  var cal = $(e.target).parents('.calendar');
631
746
  if (cal.hasClass('left')) {
632
- this.leftCalendar.month.add('month', 1);
747
+ this.leftCalendar.month.add(1, 'month');
633
748
  } else {
634
- this.rightCalendar.month.add('month', 1);
749
+ this.rightCalendar.month.add(1, 'month');
635
750
  }
636
751
  this.updateCalendars();
637
752
  },
638
753
 
639
- enterDate: function (e) {
640
-
754
+ hoverDate: function (e) {
641
755
  var title = $(e.target).attr('data-title');
642
756
  var row = title.substr(1, 1);
643
757
  var col = title.substr(3, 1);
@@ -648,7 +762,19 @@
648
762
  } else {
649
763
  this.container.find('input[name=daterangepicker_end]').val(this.rightCalendar.calendar[row][col].format(this.format));
650
764
  }
765
+ },
766
+
767
+ setCustomDates: function(startDate, endDate) {
768
+ this.chosenLabel = this.locale.customRangeLabel;
769
+ if (startDate.isAfter(endDate)) {
770
+ var difference = this.endDate.diff(this.startDate);
771
+ endDate = moment(startDate).add(difference, 'ms');
772
+ }
773
+ this.startDate = startDate;
774
+ this.endDate = endDate;
651
775
 
776
+ this.updateView();
777
+ this.updateCalendars();
652
778
  },
653
779
 
654
780
  clickDate: function (e) {
@@ -686,27 +812,14 @@
686
812
 
687
813
  cal.find('td').removeClass('active');
688
814
 
689
- if (startDate.isSame(endDate) || startDate.isBefore(endDate)) {
690
- $(e.target).addClass('active');
691
- this.startDate = startDate;
692
- this.endDate = endDate;
693
- this.chosenLabel = this.locale.customRangeLabel;
694
- } else if (startDate.isAfter(endDate)) {
695
- $(e.target).addClass('active');
696
- var difference = this.endDate.diff(this.startDate);
697
- this.startDate = startDate;
698
- this.endDate = moment(startDate).add('ms', difference);
699
- this.chosenLabel = this.locale.customRangeLabel;
700
- }
815
+ $(e.target).addClass('active');
701
816
 
702
- this.leftCalendar.month.month(this.startDate.month()).year(this.startDate.year());
703
- this.rightCalendar.month.month(this.endDate.month()).year(this.endDate.year());
704
- this.updateCalendars();
817
+ this.setCustomDates(startDate, endDate);
705
818
 
706
819
  if (!this.timePicker)
707
820
  endDate.endOf('day');
708
821
 
709
- if (this.singleDatePicker)
822
+ if (this.singleDatePicker && !this.timePicker)
710
823
  this.clickApply();
711
824
  },
712
825
 
@@ -746,6 +859,11 @@
746
859
 
747
860
  var hour = parseInt(cal.find('.hourselect').val(), 10);
748
861
  var minute = parseInt(cal.find('.minuteselect').val(), 10);
862
+ var second = 0;
863
+
864
+ if (this.timePickerSeconds) {
865
+ second = parseInt(cal.find('.secondselect').val(), 10);
866
+ }
749
867
 
750
868
  if (this.timePicker12Hour) {
751
869
  var ampm = cal.find('.ampmselect').val();
@@ -759,24 +877,31 @@
759
877
  var start = this.startDate.clone();
760
878
  start.hour(hour);
761
879
  start.minute(minute);
880
+ start.second(second);
762
881
  this.startDate = start;
763
- this.leftCalendar.month.hour(hour).minute(minute);
882
+ this.leftCalendar.month.hour(hour).minute(minute).second(second);
883
+ if (this.singleDatePicker)
884
+ this.endDate = start.clone();
764
885
  } else {
765
886
  var end = this.endDate.clone();
766
887
  end.hour(hour);
767
888
  end.minute(minute);
889
+ end.second(second);
768
890
  this.endDate = end;
769
- this.rightCalendar.month.hour(hour).minute(minute);
891
+ if (this.singleDatePicker)
892
+ this.startDate = end.clone();
893
+ this.rightCalendar.month.hour(hour).minute(minute).second(second);
770
894
  }
771
895
 
896
+ this.updateView();
772
897
  this.updateCalendars();
773
898
  },
774
899
 
775
900
  updateCalendars: function () {
776
- this.leftCalendar.calendar = this.buildCalendar(this.leftCalendar.month.month(), this.leftCalendar.month.year(), this.leftCalendar.month.hour(), this.leftCalendar.month.minute(), 'left');
777
- this.rightCalendar.calendar = this.buildCalendar(this.rightCalendar.month.month(), this.rightCalendar.month.year(), this.rightCalendar.month.hour(), this.rightCalendar.month.minute(), 'right');
778
- this.container.find('.calendar.left').empty().html(this.renderCalendar(this.leftCalendar.calendar, this.startDate, this.minDate, this.maxDate));
779
- this.container.find('.calendar.right').empty().html(this.renderCalendar(this.rightCalendar.calendar, this.endDate, this.startDate, this.maxDate));
901
+ 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');
902
+ 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');
903
+ this.container.find('.calendar.left').empty().html(this.renderCalendar(this.leftCalendar.calendar, this.startDate, this.minDate, this.maxDate, 'left'));
904
+ this.container.find('.calendar.right').empty().html(this.renderCalendar(this.rightCalendar.calendar, this.endDate, this.singleDatePicker ? this.minDate : this.startDate, this.maxDate, 'right'));
780
905
 
781
906
  this.container.find('.ranges li').removeClass('active');
782
907
  var customRange = true;
@@ -799,15 +924,17 @@
799
924
  i++;
800
925
  }
801
926
  if (customRange) {
802
- this.chosenLabel = this.container.find('.ranges li:last')
803
- .addClass('active').html();
927
+ this.chosenLabel = this.container.find('.ranges li:last').addClass('active').html();
928
+ this.showCalendars();
804
929
  }
805
930
  },
806
931
 
807
- buildCalendar: function (month, year, hour, minute, side) {
932
+ buildCalendar: function (month, year, hour, minute, second, side) {
933
+ var daysInMonth = moment([year, month]).daysInMonth();
808
934
  var firstDay = moment([year, month, 1]);
809
- var lastMonth = moment(firstDay).subtract('month', 1).month();
810
- var lastYear = moment(firstDay).subtract('month', 1).year();
935
+ var lastDay = moment([year, month, daysInMonth]);
936
+ var lastMonth = moment(firstDay).subtract(1, 'month').month();
937
+ var lastYear = moment(firstDay).subtract(1, 'month').year();
811
938
 
812
939
  var daysInLastMonth = moment([lastYear, lastMonth]).daysInMonth();
813
940
 
@@ -817,6 +944,9 @@
817
944
 
818
945
  //initialize a 6 rows x 7 columns array for the calendar
819
946
  var calendar = [];
947
+ calendar.firstDay = firstDay;
948
+ calendar.lastDay = lastDay;
949
+
820
950
  for (i = 0; i < 6; i++) {
821
951
  calendar[i] = [];
822
952
  }
@@ -829,15 +959,25 @@
829
959
  if (dayOfWeek == this.locale.firstDay)
830
960
  startDay = daysInLastMonth - 6;
831
961
 
832
- var curDate = moment([lastYear, lastMonth, startDay, 12, minute]);
962
+ var curDate = moment([lastYear, lastMonth, startDay, 12, minute, second]).zone(this.timeZone);
963
+
833
964
  var col, row;
834
- for (i = 0, col = 0, row = 0; i < 42; i++, col++, curDate = moment(curDate).add('hour', 24)) {
965
+ for (i = 0, col = 0, row = 0; i < 42; i++, col++, curDate = moment(curDate).add(24, 'hour')) {
835
966
  if (i > 0 && col % 7 === 0) {
836
967
  col = 0;
837
968
  row++;
838
969
  }
839
970
  calendar[row][col] = curDate.clone().hour(hour);
840
971
  curDate.hour(12);
972
+
973
+ if (this.minDate && calendar[row][col].format('YYYY-MM-DD') == this.minDate.format('YYYY-MM-DD') && calendar[row][col].isBefore(this.minDate) && side == 'left') {
974
+ calendar[row][col] = this.minDate.clone();
975
+ }
976
+
977
+ if (this.maxDate && calendar[row][col].format('YYYY-MM-DD') == this.maxDate.format('YYYY-MM-DD') && calendar[row][col].isAfter(this.maxDate) && side == 'right') {
978
+ calendar[row][col] = this.maxDate.clone();
979
+ }
980
+
841
981
  }
842
982
 
843
983
  return calendar;
@@ -845,9 +985,13 @@
845
985
 
846
986
  renderDropdowns: function (selected, minDate, maxDate) {
847
987
  var currentMonth = selected.month();
988
+ var currentYear = selected.year();
989
+ var maxYear = (maxDate && maxDate.year()) || (currentYear + 5);
990
+ var minYear = (minDate && minDate.year()) || (currentYear - 50);
991
+
848
992
  var monthHtml = '<select class="monthselect">';
849
- var inMinYear = false;
850
- var inMaxYear = false;
993
+ var inMinYear = currentYear == minYear;
994
+ var inMaxYear = currentYear == maxYear;
851
995
 
852
996
  for (var m = 0; m < 12; m++) {
853
997
  if ((!inMinYear || m >= minDate.month()) && (!inMaxYear || m <= maxDate.month())) {
@@ -858,9 +1002,6 @@
858
1002
  }
859
1003
  monthHtml += "</select>";
860
1004
 
861
- var currentYear = selected.year();
862
- var maxYear = (maxDate && maxDate.year()) || (currentYear + 5);
863
- var minYear = (minDate && minDate.year()) || (currentYear - 50);
864
1005
  var yearHtml = '<select class="yearselect">';
865
1006
 
866
1007
  for (var y = minYear; y <= maxYear; y++) {
@@ -874,7 +1015,7 @@
874
1015
  return monthHtml + yearHtml;
875
1016
  },
876
1017
 
877
- renderCalendar: function (calendar, selected, minDate, maxDate) {
1018
+ renderCalendar: function (calendar, selected, minDate, maxDate, side) {
878
1019
 
879
1020
  var html = '<div class="calendar-date">';
880
1021
  html += '<table class="table-condensed">';
@@ -885,7 +1026,7 @@
885
1026
  if (this.showWeekNumbers)
886
1027
  html += '<th></th>';
887
1028
 
888
- if (!minDate || minDate.isBefore(calendar[1][1])) {
1029
+ if (!minDate || minDate.isBefore(calendar.firstDay)) {
889
1030
  html += '<th class="prev available"><i class="fa fa-arrow-left icon-arrow-left glyphicon glyphicon-arrow-left"></i></th>';
890
1031
  } else {
891
1032
  html += '<th></th>';
@@ -898,7 +1039,7 @@
898
1039
  }
899
1040
 
900
1041
  html += '<th colspan="5" class="month">' + dateHtml + '</th>';
901
- if (!maxDate || maxDate.isAfter(calendar[1][1])) {
1042
+ if (!maxDate || maxDate.isAfter(calendar.lastDay)) {
902
1043
  html += '<th class="next available"><i class="fa fa-arrow-right icon-arrow-right glyphicon glyphicon-arrow-right"></i></th>';
903
1044
  } else {
904
1045
  html += '<th></th>';
@@ -961,6 +1102,29 @@
961
1102
 
962
1103
  html += '<div class="calendar-time">';
963
1104
  html += '<select class="hourselect">';
1105
+
1106
+ // Disallow selections before the minDate or after the maxDate
1107
+ var min_hour = 0;
1108
+ var max_hour = 23;
1109
+
1110
+ if (minDate && (side == 'left' || this.singleDatePicker) && selected.format('YYYY-MM-DD') == minDate.format('YYYY-MM-DD')) {
1111
+ min_hour = minDate.hour();
1112
+ if (selected.hour() < min_hour)
1113
+ selected.hour(min_hour);
1114
+ if (this.timePicker12Hour && min_hour >= 12 && selected.hour() >= 12)
1115
+ min_hour -= 12;
1116
+ if (this.timePicker12Hour && min_hour == 12)
1117
+ min_hour = 1;
1118
+ }
1119
+
1120
+ if (maxDate && (side == 'right' || this.singleDatePicker) && selected.format('YYYY-MM-DD') == maxDate.format('YYYY-MM-DD')) {
1121
+ max_hour = maxDate.hour();
1122
+ if (selected.hour() > max_hour)
1123
+ selected.hour(max_hour);
1124
+ if (this.timePicker12Hour && max_hour >= 12 && selected.hour() >= 12)
1125
+ max_hour -= 12;
1126
+ }
1127
+
964
1128
  var start = 0;
965
1129
  var end = 23;
966
1130
  var selected_hour = selected.hour();
@@ -974,8 +1138,11 @@
974
1138
  }
975
1139
 
976
1140
  for (i = start; i <= end; i++) {
1141
+
977
1142
  if (i == selected_hour) {
978
1143
  html += '<option value="' + i + '" selected="selected">' + i + '</option>';
1144
+ } else if (i < min_hour || i > max_hour) {
1145
+ html += '<option value="' + i + '" disabled="disabled" class="disabled">' + i + '</option>';
979
1146
  } else {
980
1147
  html += '<option value="' + i + '">' + i + '</option>';
981
1148
  }
@@ -985,12 +1152,30 @@
985
1152
 
986
1153
  html += '<select class="minuteselect">';
987
1154
 
1155
+ // Disallow selections before the minDate or after the maxDate
1156
+ var min_minute = 0;
1157
+ var max_minute = 59;
1158
+
1159
+ if (minDate && (side == 'left' || this.singleDatePicker) && selected.format('YYYY-MM-DD h A') == minDate.format('YYYY-MM-DD h A')) {
1160
+ min_minute = minDate.minute();
1161
+ if (selected.minute() < min_minute)
1162
+ selected.minute(min_minute);
1163
+ }
1164
+
1165
+ if (maxDate && (side == 'right' || this.singleDatePicker) && selected.format('YYYY-MM-DD h A') == maxDate.format('YYYY-MM-DD h A')) {
1166
+ max_minute = maxDate.minute();
1167
+ if (selected.minute() > max_minute)
1168
+ selected.minute(max_minute);
1169
+ }
1170
+
988
1171
  for (i = 0; i < 60; i += this.timePickerIncrement) {
989
1172
  var num = i;
990
1173
  if (num < 10)
991
1174
  num = '0' + num;
992
1175
  if (i == selected.minute()) {
993
1176
  html += '<option value="' + i + '" selected="selected">' + num + '</option>';
1177
+ } else if (i < min_minute || i > max_minute) {
1178
+ html += '<option value="' + i + '" disabled="disabled" class="disabled">' + num + '</option>';
994
1179
  } else {
995
1180
  html += '<option value="' + i + '">' + num + '</option>';
996
1181
  }
@@ -998,12 +1183,42 @@
998
1183
 
999
1184
  html += '</select> ';
1000
1185
 
1186
+ if (this.timePickerSeconds) {
1187
+ html += ': <select class="secondselect">';
1188
+
1189
+ for (i = 0; i < 60; i += this.timePickerIncrement) {
1190
+ var num = i;
1191
+ if (num < 10)
1192
+ num = '0' + num;
1193
+ if (i == selected.second()) {
1194
+ html += '<option value="' + i + '" selected="selected">' + num + '</option>';
1195
+ } else {
1196
+ html += '<option value="' + i + '">' + num + '</option>';
1197
+ }
1198
+ }
1199
+
1200
+ html += '</select>';
1201
+ }
1202
+
1001
1203
  if (this.timePicker12Hour) {
1002
1204
  html += '<select class="ampmselect">';
1205
+
1206
+ // Disallow selection before the minDate or after the maxDate
1207
+ var am_html = '';
1208
+ var pm_html = '';
1209
+
1210
+ if (minDate && (side == 'left' || this.singleDatePicker) && selected.format('YYYY-MM-DD') == minDate.format('YYYY-MM-DD') && minDate.hour() >= 12) {
1211
+ am_html = ' disabled="disabled" class="disabled"';
1212
+ }
1213
+
1214
+ if (maxDate && (side == 'right' || this.singleDatePicker) && selected.format('YYYY-MM-DD') == maxDate.format('YYYY-MM-DD') && maxDate.hour() < 12) {
1215
+ pm_html = ' disabled="disabled" class="disabled"';
1216
+ }
1217
+
1003
1218
  if (selected.hour() >= 12) {
1004
- html += '<option value="AM">AM</option><option value="PM" selected="selected">PM</option>';
1219
+ html += '<option value="AM"' + am_html + '>AM</option><option value="PM" selected="selected"' + pm_html + '>PM</option>';
1005
1220
  } else {
1006
- html += '<option value="AM" selected="selected">AM</option><option value="PM">PM</option>';
1221
+ html += '<option value="AM" selected="selected"' + am_html + '>AM</option><option value="PM"' + pm_html + '>PM</option>';
1007
1222
  }
1008
1223
  html += '</select>';
1009
1224
  }
@@ -1036,4 +1251,4 @@
1036
1251
  return this;
1037
1252
  };
1038
1253
 
1039
- }(window.jQuery, window.moment);
1254
+ }));
@@ -18,7 +18,8 @@
18
18
  margin: 4px;
19
19
  }
20
20
 
21
- .daterangepicker.opensright .ranges, .daterangepicker.opensright .calendar {
21
+ .daterangepicker.opensright .ranges, .daterangepicker.opensright .calendar,
22
+ .daterangepicker.openscenter .ranges, .daterangepicker.openscenter .calendar {
22
23
  float: right;
23
24
  margin: 4px;
24
25
  }
@@ -140,6 +141,37 @@
140
141
  content: '';
141
142
  }
142
143
 
144
+ .daterangepicker.openscenter:before {
145
+ position: absolute;
146
+ top: -7px;
147
+ left: 0;
148
+ right: 0;
149
+ width: 0;
150
+ margin-left: auto;
151
+ margin-right: auto;
152
+ display: inline-block;
153
+ border-right: 7px solid transparent;
154
+ border-bottom: 7px solid #ccc;
155
+ border-left: 7px solid transparent;
156
+ border-bottom-color: rgba(0, 0, 0, 0.2);
157
+ content: '';
158
+ }
159
+
160
+ .daterangepicker.openscenter:after {
161
+ position: absolute;
162
+ top: -6px;
163
+ left: 0;
164
+ right: 0;
165
+ width: 0;
166
+ margin-left: auto;
167
+ margin-right: auto;
168
+ display: inline-block;
169
+ border-right: 6px solid transparent;
170
+ border-bottom: 6px solid #fff;
171
+ border-left: 6px solid transparent;
172
+ content: '';
173
+ }
174
+
143
175
  .daterangepicker.opensright:before {
144
176
  position: absolute;
145
177
  top: -7px;
@@ -183,7 +215,7 @@
183
215
  color: #999;
184
216
  }
185
217
 
186
- .daterangepicker td.disabled {
218
+ .daterangepicker td.disabled, .daterangepicker option.disabled {
187
219
  color: #999;
188
220
  }
189
221
 
@@ -237,7 +269,7 @@
237
269
  width: 40%;
238
270
  }
239
271
 
240
- .daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.ampmselect {
272
+ .daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
241
273
  width: 60px;
242
274
  margin-bottom: 0;
243
275
  }
@@ -253,4 +285,4 @@
253
285
 
254
286
  .daterangepicker th.month {
255
287
  width: auto;
256
- }
288
+ }
@@ -18,11 +18,16 @@
18
18
  margin: 4px;
19
19
  }
20
20
 
21
- .daterangepicker.opensright .ranges, .daterangepicker.opensright .calendar {
21
+ .daterangepicker.opensright .ranges, .daterangepicker.opensright .calendar,
22
+ .daterangepicker.openscenter .ranges, .daterangepicker.openscenter .calendar {
22
23
  float: right;
23
24
  margin: 4px;
24
25
  }
25
26
 
27
+ .daterangepicker.single .ranges, .daterangepicker.single .calendar {
28
+ float: none;
29
+ }
30
+
26
31
  .daterangepicker .ranges {
27
32
  width: 160px;
28
33
  text-align: left;
@@ -75,7 +80,6 @@
75
80
  }
76
81
 
77
82
  .daterangepicker .ranges .input-mini {
78
- background-color: #eee;
79
83
  border: 1px solid #ccc;
80
84
  border-radius: 4px;
81
85
  color: #555;
@@ -89,10 +93,6 @@
89
93
  width: 74px;
90
94
  }
91
95
 
92
- .daterangepicker .ranges .input-mini:hover {
93
- cursor: pointer;
94
- }
95
-
96
96
  .daterangepicker .ranges ul {
97
97
  list-style: none;
98
98
  margin: 0;
@@ -166,6 +166,37 @@
166
166
  content: '';
167
167
  }
168
168
 
169
+ .daterangepicker.openscenter:before {
170
+ position: absolute;
171
+ top: -7px;
172
+ left: 0;
173
+ right: 0;
174
+ width: 0;
175
+ margin-left: auto;
176
+ margin-right: auto;
177
+ display: inline-block;
178
+ border-right: 7px solid transparent;
179
+ border-bottom: 7px solid #ccc;
180
+ border-left: 7px solid transparent;
181
+ border-bottom-color: rgba(0, 0, 0, 0.2);
182
+ content: '';
183
+ }
184
+
185
+ .daterangepicker.openscenter:after {
186
+ position: absolute;
187
+ top: -6px;
188
+ left: 0;
189
+ right: 0;
190
+ width: 0;
191
+ margin-left: auto;
192
+ margin-right: auto;
193
+ display: inline-block;
194
+ border-right: 6px solid transparent;
195
+ border-bottom: 6px solid #fff;
196
+ border-left: 6px solid transparent;
197
+ content: '';
198
+ }
199
+
169
200
  .daterangepicker.opensright:before {
170
201
  position: absolute;
171
202
  top: -7px;
@@ -209,7 +240,7 @@
209
240
  color: #999;
210
241
  }
211
242
 
212
- .daterangepicker td.disabled {
243
+ .daterangepicker td.disabled, .daterangepicker option.disabled {
213
244
  color: #999;
214
245
  }
215
246
 
@@ -224,22 +255,22 @@
224
255
  border-radius: 0;
225
256
  }
226
257
 
227
- .daterangepicker td.available + td.start-date {
258
+ .daterangepicker td.start-date {
228
259
  -webkit-border-radius: 4px 0 0 4px;
229
260
  -moz-border-radius: 4px 0 0 4px;
230
261
  border-radius: 4px 0 0 4px;
231
262
  }
232
263
 
233
- .daterangepicker td.in-range + td.end-date{
264
+ .daterangepicker td.end-date {
234
265
  -webkit-border-radius: 0 4px 4px 0;
235
266
  -moz-border-radius: 0 4px 4px 0;
236
267
  border-radius: 0 4px 4px 0;
237
268
  }
238
269
 
239
- .daterangepicker td.start-date.end-date{
240
- -webkit-border-radius: 4px !important;
241
- -moz-border-radius: 4px !important;
242
- border-radius: 4px !important;
270
+ .daterangepicker td.start-date.end-date {
271
+ -webkit-border-radius: 4px;
272
+ -moz-border-radius: 4px;
273
+ border-radius: 4px;
243
274
  }
244
275
 
245
276
  .daterangepicker td.active, .daterangepicker td.active:hover {
@@ -270,7 +301,7 @@
270
301
  width: 40%;
271
302
  }
272
303
 
273
- .daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.ampmselect {
304
+ .daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
274
305
  width: 50px;
275
306
  margin-bottom: 0;
276
307
  }
@@ -286,4 +317,4 @@
286
317
 
287
318
  .daterangepicker th.month {
288
319
  width: auto;
289
- }
320
+ }
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: bootstrap-daterangepicker-rails
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.0
4
+ version: 0.1.1
5
5
  platform: ruby
6
6
  authors:
7
7
  - Dan Grossman
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2014-12-16 00:00:00.000000000 Z
12
+ date: 2014-12-18 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: railties
@@ -17,14 +17,14 @@ dependencies:
17
17
  requirements:
18
18
  - - "~>"
19
19
  - !ruby/object:Gem::Version
20
- version: '4.1'
20
+ version: '4.0'
21
21
  type: :runtime
22
22
  prerelease: false
23
23
  version_requirements: !ruby/object:Gem::Requirement
24
24
  requirements:
25
25
  - - "~>"
26
26
  - !ruby/object:Gem::Version
27
- version: '4.1'
27
+ version: '4.0'
28
28
  - !ruby/object:Gem::Dependency
29
29
  name: test-unit
30
30
  requirement: !ruby/object:Gem::Requirement