pikaday-gem 1.1.0.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,27 +1,32 @@
1
1
  /*!
2
2
  * Pikaday
3
3
  *
4
- * Copyright © 2013 David Bushell | BSD & MIT license | https://github.com/dbushell/Pikaday
4
+ * Copyright © 2014 David Bushell | BSD & MIT license | https://github.com/dbushell/Pikaday
5
5
  */
6
6
 
7
- (function (root, define, factory)
7
+ (function (root, factory)
8
8
  {
9
9
  'use strict';
10
10
 
11
- if (typeof define === 'function' && define.amd) {
11
+ var moment;
12
+ if (typeof exports === 'object') {
13
+ // CommonJS module
14
+ // Load moment.js as an optional dependency
15
+ try { moment = require('moment'); } catch (e) {}
16
+ module.exports = factory(moment);
17
+ } else if (typeof define === 'function' && define.amd) {
12
18
  // AMD. Register as an anonymous module.
13
19
  define(function (req)
14
20
  {
15
21
  // Load moment.js as an optional dependency
16
22
  var id = 'moment';
17
- var moment = req.defined && req.defined(id) ? req(id) : undefined;
18
- return factory(moment || root.moment);
23
+ moment = req.defined && req.defined(id) ? req(id) : undefined;
24
+ return factory(moment);
19
25
  });
20
26
  } else {
21
- // Browser global
22
27
  root.Pikaday = factory(root.moment);
23
28
  }
24
- }(window, window.define, function (moment)
29
+ }(this, function (moment)
25
30
  {
26
31
  'use strict';
27
32
 
@@ -161,6 +166,10 @@
161
166
  // automatically show/hide the picker on `field` focus (default `true` if `field` is set)
162
167
  bound: undefined,
163
168
 
169
+ // position of the datepicker, relative to the field (default to bottom & left)
170
+ // ('bottom' & 'left' keywords are not used, 'top' & 'right' are modifier on the bottom/left position)
171
+ position: 'bottom left',
172
+
164
173
  // the default output format for `.toString()` and `field` value
165
174
  format: 'YYYY-MM-DD',
166
175
 
@@ -189,6 +198,12 @@
189
198
 
190
199
  isRTL: false,
191
200
 
201
+ // Additional text to append to the year in the calendar title
202
+ yearSuffix: '',
203
+
204
+ // Render the month after year in the calendar title
205
+ showMonthAfterYear: false,
206
+
192
207
  // how many months are visible (not implemented yet)
193
208
  numberOfMonths: 1,
194
209
 
@@ -267,6 +282,8 @@
267
282
  isMinYear = year === opts.minYear,
268
283
  isMaxYear = year === opts.maxYear,
269
284
  html = '<div class="pika-title">',
285
+ monthHtml,
286
+ yearHtml,
270
287
  prev = true,
271
288
  next = true;
272
289
 
@@ -276,7 +293,7 @@
276
293
  ((isMinYear && i < opts.minMonth) || (isMaxYear && i > opts.maxMonth) ? 'disabled' : '') + '>' +
277
294
  opts.i18n.months[i] + '</option>');
278
295
  }
279
- html += '<div class="pika-label">' + opts.i18n.months[month] + '<select class="pika-select pika-select-month">' + arr.join('') + '</select></div>';
296
+ monthHtml = '<div class="pika-label">' + opts.i18n.months[month] + '<select class="pika-select pika-select-month">' + arr.join('') + '</select></div>';
280
297
 
281
298
  if (isArray(opts.yearRange)) {
282
299
  i = opts.yearRange[0];
@@ -291,7 +308,13 @@
291
308
  arr.push('<option value="' + i + '"' + (i === year ? ' selected': '') + '>' + (i) + '</option>');
292
309
  }
293
310
  }
294
- html += '<div class="pika-label">' + year + '<select class="pika-select pika-select-year">' + arr.join('') + '</select></div>';
311
+ yearHtml = '<div class="pika-label">' + year + opts.yearSuffix + '<select class="pika-select pika-select-year">' + arr.join('') + '</select></div>';
312
+
313
+ if (opts.showMonthAfterYear) {
314
+ html += yearHtml + monthHtml;
315
+ } else {
316
+ html += monthHtml + yearHtml;
317
+ }
295
318
 
296
319
  if (isMinYear && (month === 0 || opts.minMonth >= month)) {
297
320
  prev = false;
@@ -436,7 +459,7 @@
436
459
  }
437
460
  }
438
461
  while ((pEl = pEl.parentNode));
439
- if (self._v && target !== opts.field) {
462
+ if (self._v && target !== opts.trigger) {
440
463
  self.hide();
441
464
  }
442
465
  };
@@ -480,9 +503,9 @@
480
503
  if (opts.bound) {
481
504
  this.hide();
482
505
  self.el.className += ' is-bound';
483
- addEvent(opts.field, 'click', self._onInputClick);
484
- addEvent(opts.field, 'focus', self._onInputFocus);
485
- addEvent(opts.field, 'blur', self._onInputBlur);
506
+ addEvent(opts.trigger, 'click', self._onInputClick);
507
+ addEvent(opts.trigger, 'focus', self._onInputFocus);
508
+ addEvent(opts.trigger, 'blur', self._onInputBlur);
486
509
  } else {
487
510
  this.show();
488
511
  }
@@ -513,6 +536,8 @@
513
536
 
514
537
  opts.bound = !!(opts.bound !== undefined ? opts.field && opts.bound : opts.field);
515
538
 
539
+ opts.trigger = (opts.trigger && opts.trigger.nodeName) ? opts.trigger : opts.field;
540
+
516
541
  var nom = parseInt(opts.numberOfMonths, 10) || 1;
517
542
  opts.numberOfMonths = nom > 4 ? 4 : nom;
518
543
 
@@ -569,10 +594,10 @@
569
594
  /**
570
595
  * set the current selection from a Moment.js object (if available)
571
596
  */
572
- setMoment: function(date)
597
+ setMoment: function(date, preventOnSelect)
573
598
  {
574
599
  if (hasMoment && moment.isMoment(date)) {
575
- this.setDate(date.toDate());
600
+ this.setDate(date.toDate(), preventOnSelect);
576
601
  }
577
602
  },
578
603
 
@@ -680,6 +705,22 @@
680
705
  }
681
706
  },
682
707
 
708
+ /**
709
+ * change the minDate
710
+ */
711
+ setMinDate: function(value)
712
+ {
713
+ this._o.minDate = value;
714
+ },
715
+
716
+ /**
717
+ * change the maxDate
718
+ */
719
+ setMaxDate: function(value)
720
+ {
721
+ this._o.maxDate = value;
722
+ },
723
+
683
724
  /**
684
725
  * refresh the HTML
685
726
  */
@@ -710,17 +751,12 @@
710
751
  this.el.innerHTML = renderTitle(this) + this.render(this._y, this._m);
711
752
 
712
753
  if (opts.bound) {
713
- var pEl = opts.field,
714
- left = pEl.offsetLeft,
715
- top = pEl.offsetTop + pEl.offsetHeight;
716
- while((pEl = pEl.offsetParent)) {
717
- left += pEl.offsetLeft;
718
- top += pEl.offsetTop;
754
+ this.adjustPosition();
755
+ if(opts.field.type !== 'hidden') {
756
+ sto(function() {
757
+ opts.trigger.focus();
758
+ }, 1);
719
759
  }
720
- this.el.style.cssText = 'position:absolute;left:' + left + 'px;top:' + top + 'px;';
721
- sto(function() {
722
- opts.field.focus();
723
- }, 1);
724
760
  }
725
761
 
726
762
  if (typeof this._o.onDraw === 'function') {
@@ -731,6 +767,52 @@
731
767
  }
732
768
  },
733
769
 
770
+ adjustPosition: function()
771
+ {
772
+ var field = this._o.trigger, pEl = field,
773
+ width = this.el.offsetWidth, height = this.el.offsetHeight,
774
+ viewportWidth = window.innerWidth || document.documentElement.clientWidth,
775
+ viewportHeight = window.innerHeight || document.documentElement.clientHeight,
776
+ scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
777
+ left, top, clientRect;
778
+
779
+ if (typeof field.getBoundingClientRect === 'function') {
780
+ clientRect = field.getBoundingClientRect();
781
+ left = clientRect.left + window.pageXOffset;
782
+ top = clientRect.bottom + window.pageYOffset;
783
+ } else {
784
+ left = pEl.offsetLeft;
785
+ top = pEl.offsetTop + pEl.offsetHeight;
786
+ while((pEl = pEl.offsetParent)) {
787
+ left += pEl.offsetLeft;
788
+ top += pEl.offsetTop;
789
+ }
790
+ }
791
+
792
+ // default position is bottom & left
793
+ if (left + width > viewportWidth ||
794
+ (
795
+ this._o.position.indexOf('right') > -1 &&
796
+ left - width + field.offsetWidth > 0
797
+ )
798
+ ) {
799
+ left = left - width + field.offsetWidth;
800
+ }
801
+ if (top + height > viewportHeight + scrollTop ||
802
+ (
803
+ this._o.position.indexOf('top') > -1 &&
804
+ top - height - field.offsetHeight > 0
805
+ )
806
+ ) {
807
+ top = top - height - field.offsetHeight;
808
+ }
809
+ this.el.style.cssText = [
810
+ 'position: absolute',
811
+ 'left: ' + left + 'px',
812
+ 'top: ' + top + 'px'
813
+ ].join(';');
814
+ },
815
+
734
816
  /**
735
817
  * render HTML for a particular month
736
818
  */
@@ -821,9 +903,9 @@
821
903
  if (this._o.field) {
822
904
  removeEvent(this._o.field, 'change', this._onInputChange);
823
905
  if (this._o.bound) {
824
- removeEvent(this._o.field, 'click', this._onInputClick);
825
- removeEvent(this._o.field, 'focus', this._onInputFocus);
826
- removeEvent(this._o.field, 'blur', this._onInputBlur);
906
+ removeEvent(this._o.trigger, 'click', this._onInputClick);
907
+ removeEvent(this._o.trigger, 'focus', this._onInputFocus);
908
+ removeEvent(this._o.trigger, 'blur', this._onInputBlur);
827
909
  }
828
910
  }
829
911
  if (this.el.parentNode) {
@@ -835,4 +917,4 @@
835
917
 
836
918
  return Pikaday;
837
919
 
838
- }));
920
+ }));
@@ -0,0 +1,173 @@
1
+ @charset "UTF-8";
2
+
3
+ /*!
4
+ * Pikaday
5
+ * Copyright © 2014 David Bushell | BSD & MIT license | http://dbushell.com/
6
+ */
7
+
8
+ .pika-single {
9
+ z-index: 9999;
10
+ display: block;
11
+ position: relative;
12
+ width: 240px;
13
+ padding: 8px;
14
+ color: #333;
15
+ background: #fff;
16
+ border: 1px solid #ccc;
17
+ border-bottom-color: #bbb;
18
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
19
+ }
20
+
21
+ .pika-single.is-hidden {
22
+ display: none;
23
+ }
24
+
25
+ .pika-single.is-bound {
26
+ position: absolute;
27
+ box-shadow: 0 5px 15px -5px rgba(0,0,0,.5);
28
+ }
29
+
30
+ .pika-title {
31
+ position: relative;
32
+ text-align: center;
33
+ }
34
+
35
+ .pika-label {
36
+ display: inline-block;
37
+ *display: inline;
38
+ position: relative;
39
+ z-index: 9999;
40
+ overflow: hidden;
41
+ margin: 0;
42
+ padding: 5px 3px;
43
+ font-size: 14px;
44
+ line-height: 20px;
45
+ font-weight: bold;
46
+ background-color: #fff;
47
+ }
48
+ .pika-title select {
49
+ cursor: pointer;
50
+ position: absolute;
51
+ z-index: 9998;
52
+ margin: 0;
53
+ left: 0;
54
+ top: 5px;
55
+ filter: alpha(opacity=0);
56
+ opacity: 0;
57
+ }
58
+
59
+ .pika-prev,
60
+ .pika-next {
61
+ display: block;
62
+ cursor: pointer;
63
+ position: relative;
64
+ outline: none;
65
+ border: 0;
66
+ padding: 0;
67
+ width: 20px;
68
+ height: 30px;
69
+ /* hide text using text-indent trick, using width value (it's enough) */
70
+ text-indent: 20px;
71
+ white-space: nowrap;
72
+ overflow: hidden;
73
+ background-color: transparent;
74
+ background-position: center center;
75
+ background-repeat: no-repeat;
76
+ background-size: 75% 75%;
77
+ opacity: .5;
78
+ *position: absolute;
79
+ *top: 0;
80
+ }
81
+
82
+ .pika-prev:hover,
83
+ .pika-next:hover {
84
+ opacity: 1;
85
+ }
86
+
87
+ .pika-prev,
88
+ .is-rtl .pika-next {
89
+ float: left;
90
+ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==');
91
+ *left: 0;
92
+ }
93
+
94
+ .pika-next,
95
+ .is-rtl .pika-prev {
96
+ float: right;
97
+ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=');
98
+ *right: 0;
99
+ }
100
+
101
+ .pika-prev.is-disabled,
102
+ .pika-next.is-disabled {
103
+ cursor: default;
104
+ opacity: .2;
105
+ }
106
+
107
+ .pika-select {
108
+ display: inline-block;
109
+ *display: inline;
110
+ }
111
+
112
+ .pika-table {
113
+ width: 100%;
114
+ border-collapse: collapse;
115
+ border-spacing: 0;
116
+ border: 0;
117
+ }
118
+
119
+ .pika-table th,
120
+ .pika-table td {
121
+ width: 14.285714285714286%;
122
+ padding: 0;
123
+ }
124
+
125
+ .pika-table th {
126
+ color: #999;
127
+ font-size: 12px;
128
+ line-height: 25px;
129
+ font-weight: bold;
130
+ text-align: center;
131
+ }
132
+
133
+ .pika-button {
134
+ cursor: pointer;
135
+ display: block;
136
+ outline: none;
137
+ border: 0;
138
+ margin: 0;
139
+ width: 100%;
140
+ padding: 5px;
141
+ color: #666;
142
+ font-size: 12px;
143
+ line-height: 15px;
144
+ text-align: right;
145
+ background: #f5f5f5;
146
+ }
147
+
148
+ .is-today .pika-button {
149
+ color: #33aaff;
150
+ font-weight: bold;
151
+ }
152
+
153
+ .is-selected .pika-button {
154
+ color: #fff;
155
+ font-weight: bold;
156
+ background: #33aaff;
157
+ box-shadow: inset 0 1px 3px #178fe5;
158
+ border-radius: 3px;
159
+ }
160
+
161
+ .is-disabled .pika-button {
162
+ pointer-events: none;
163
+ cursor: default;
164
+ color: #999;
165
+ opacity: .3;
166
+ }
167
+
168
+ .pika-button:hover {
169
+ color: #fff !important;
170
+ background: #ff8000 !important;
171
+ box-shadow: none !important;
172
+ border-radius: 3px !important;
173
+ }
@@ -2,7 +2,7 @@
2
2
 
3
3
  /*!
4
4
  * Pikaday
5
- * Copyright © 2012 David Bushell | BSD & MIT license | http://dbushell.com/
5
+ * Copyright © 2014 David Bushell | BSD & MIT license | http://dbushell.com/
6
6
  */
7
7
 
8
8
  .pika-single {
@@ -66,13 +66,14 @@
66
66
  padding: 0;
67
67
  width: 20px;
68
68
  height: 30px;
69
+ /* hide text using text-indent trick, using width value (it's enough) */
70
+ text-indent: 20px;
71
+ white-space: nowrap;
72
+ overflow: hidden;
69
73
  background-color: transparent;
70
74
  background-position: center center;
71
75
  background-repeat: no-repeat;
72
76
  background-size: 75% 75%;
73
- white-space: nowrap;
74
- text-indent: 100%;
75
- overflow: hidden;
76
77
  opacity: .5;
77
78
  *position: absolute;
78
79
  *top: 0;
@@ -118,6 +119,7 @@
118
119
  .pika-table th,
119
120
  .pika-table td {
120
121
  width: 14.285714285714286%;
122
+ padding: 0;
121
123
  }
122
124
 
123
125
  .pika-table th {