md-date-time-picker-rails 2.1.0 → 2.1.1
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.
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 80a340c03ae835c9f75499169fc930033ed9d442
|
4
|
+
data.tar.gz: 2ec13f77fea8e705fa2a3b79a82c512f01c80bec
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 39e17f033476c87ce9c534bf200ce9d21a40b2e83ce1f2ceaa1fcb0ccecb2b99547652ea0f903486165576e0b16d4918d39664d05904ae635f5f7608489185d7
|
7
|
+
data.tar.gz: a212090fc8594b3e3d4ac1ae0fad18a7f7cd47a29325c0a19c29313792743f09035097589a6824ab29acaf4ec9473fff101ebf62e757a9a06b6531cb4eceb8f3
|
data/README.md
CHANGED
@@ -32,8 +32,8 @@ and add the following line:
|
|
32
32
|
``` javascript
|
33
33
|
//= require moment.min
|
34
34
|
//= require moment.locales# if using another locale
|
35
|
-
//= require mdDateTimePicker
|
36
35
|
//= require draggabilly.pkgd.min # If using TimeDialog
|
36
|
+
//= require mdDateTimePicker
|
37
37
|
```
|
38
38
|
|
39
39
|
And you need to edit your `app/assets/stylesheets/application.css` file
|
@@ -60,17 +60,18 @@
|
|
60
60
|
* @param {String} type = 'date' or 'time [type of dialog]
|
61
61
|
* @param {moment} init [initial value for the dialog date or time, defaults to today] [@default = today]
|
62
62
|
* @param {moment} past [the past moment till which the calendar shall render] [@default = exactly 21 Years ago from init]
|
63
|
-
* @param {moment} future
|
63
|
+
* @param {moment} future [the future moment till which the calendar shall render] [@default = init]
|
64
64
|
* @param {Boolean} mode [this value tells whether the time dialog will have the 24 hour mode (true) or 12 hour mode (false)] [@default = false]
|
65
65
|
* @param {String} orientation = 'LANDSCAPE' or 'PORTRAIT' [force the orientation of the picker @default = 'LANDSCAPE']
|
66
66
|
* @param {element} trigger [element on which all the events will be dispatched e.g var foo = document.getElementById('bar'), here element = foo]
|
67
67
|
* @param {String} ok = 'ok' [ok button's text]
|
68
68
|
* @param {String} cancel = 'cancel' [cancel button's text]
|
69
69
|
* @param {Boolean} colon = true [add an option to enable quote in 24 hour mode]
|
70
|
+
* @param {Boolean} autoClose = false [close dialog on date/time selection]
|
71
|
+
* @param {Boolean} inner24 = false [if 24-hour mode and (true), the PM hours shows in an inner dial]
|
70
72
|
*
|
71
|
-
* @return {Object}
|
73
|
+
* @return {Object} [mdDateTimePicker]
|
72
74
|
*/
|
73
|
-
|
74
75
|
function mdDateTimePicker(_ref) {
|
75
76
|
var type = _ref.type,
|
76
77
|
_ref$init = _ref.init,
|
@@ -90,7 +91,11 @@
|
|
90
91
|
_ref$cancel = _ref.cancel,
|
91
92
|
cancel = _ref$cancel === undefined ? 'cancel' : _ref$cancel,
|
92
93
|
_ref$colon = _ref.colon,
|
93
|
-
colon = _ref$colon === undefined ? !0 : _ref$colon
|
94
|
+
colon = _ref$colon === undefined ? !0 : _ref$colon,
|
95
|
+
_ref$autoClose = _ref.autoClose,
|
96
|
+
autoClose = _ref$autoClose === undefined ? !1 : _ref$autoClose,
|
97
|
+
_ref$inner = _ref.inner24,
|
98
|
+
inner24 = _ref$inner === undefined ? !1 : _ref$inner;
|
94
99
|
|
95
100
|
_classCallCheck(this, mdDateTimePicker);
|
96
101
|
|
@@ -104,6 +109,8 @@
|
|
104
109
|
this._ok = ok;
|
105
110
|
this._cancel = cancel;
|
106
111
|
this._colon = colon;
|
112
|
+
this._autoClose = autoClose;
|
113
|
+
this._inner24 = inner24;
|
107
114
|
|
108
115
|
/**
|
109
116
|
* [dialog selected classes have the same structure as dialog but one level down]
|
@@ -132,19 +139,31 @@
|
|
132
139
|
|
133
140
|
|
134
141
|
_createClass(mdDateTimePicker, [{
|
142
|
+
key: 'hide',
|
143
|
+
value: function hide() {
|
144
|
+
this._selectDialog();
|
145
|
+
this._hideDialog();
|
146
|
+
}
|
147
|
+
}, {
|
148
|
+
key: 'show',
|
149
|
+
value: function show() {
|
150
|
+
this._selectDialog();
|
151
|
+
if (this._type === 'date') {
|
152
|
+
this._initDateDialog(this._init);
|
153
|
+
} else if (this._type === 'time') {
|
154
|
+
this._initTimeDialog(this._init);
|
155
|
+
}
|
156
|
+
this._showDialog();
|
157
|
+
}
|
158
|
+
}, {
|
135
159
|
key: 'toggle',
|
136
160
|
value: function toggle() {
|
137
161
|
this._selectDialog();
|
138
162
|
// work according to the current state of the dialog
|
139
163
|
if (mdDateTimePicker.dialog.state) {
|
140
|
-
this.
|
164
|
+
this.hide();
|
141
165
|
} else {
|
142
|
-
|
143
|
-
this._initDateDialog(this._init);
|
144
|
-
} else if (this._type === 'time') {
|
145
|
-
this._initTimeDialog(this._init);
|
146
|
-
}
|
147
|
-
this._showDialog();
|
166
|
+
this.show();
|
148
167
|
}
|
149
168
|
}
|
150
169
|
}, {
|
@@ -369,9 +388,13 @@
|
|
369
388
|
this._addClass(_subtitle, 'subtitle');
|
370
389
|
_subtitle.setAttribute('style', 'display: none');
|
371
390
|
this._addId(AM, 'AM');
|
372
|
-
AM.textContent = 'AM'
|
391
|
+
//AM.textContent = 'AM'
|
392
|
+
// Change to 'AM' to Locale Meridiem
|
393
|
+
AM.textContent = _moment2.default.langData()._meridiemParse.toString().replace(/\//g, "").split("|")[0];
|
373
394
|
this._addId(PM, 'PM');
|
374
|
-
PM.textContent = 'PM'
|
395
|
+
//PM.textContent = 'PM'
|
396
|
+
// Change to 'PM' to Locale Meridiem
|
397
|
+
PM.textContent = _moment2.default.langData()._meridiemParse.toString().replace(/\//g, "").split("|")[1];
|
375
398
|
// add them to title and subtitle
|
376
399
|
_title.appendChild(hour);
|
377
400
|
_title.appendChild(span);
|
@@ -410,6 +433,11 @@
|
|
410
433
|
body.appendChild(circularHolder);
|
411
434
|
}
|
412
435
|
action.classList.add('mddtp-picker__action');
|
436
|
+
|
437
|
+
if (this._autoClose === !0) {
|
438
|
+
action.style.display = "none";
|
439
|
+
}
|
440
|
+
|
413
441
|
this._addId(cancel, 'cancel');
|
414
442
|
cancel.classList.add('mddtp-button');
|
415
443
|
cancel.setAttribute('type', 'button');
|
@@ -447,7 +475,13 @@
|
|
447
475
|
}
|
448
476
|
} else {
|
449
477
|
this._fillText(hour, m.format('h'));
|
450
|
-
this._sDialog[m.format('A')].classList.add('mddtp-picker__color--active')
|
478
|
+
//this._sDialog[m.format('A')].classList.add('mddtp-picker__color--active')
|
479
|
+
// Using isPM function for Find PM
|
480
|
+
if (m._locale.isPM(m.format('A'))) {
|
481
|
+
this._sDialog.PM.classList.add('mddtp-picker__color--active');
|
482
|
+
} else {
|
483
|
+
this._sDialog.AM.classList.add('mddtp-picker__color--active');
|
484
|
+
}
|
451
485
|
subtitle.removeAttribute('style');
|
452
486
|
dotSpan.removeAttribute('style');
|
453
487
|
}
|
@@ -470,13 +504,15 @@
|
|
470
504
|
hour = 'mddtp-hour__selected',
|
471
505
|
selected = 'mddtp-picker__cell--selected',
|
472
506
|
rotate = 'mddtp-picker__cell--rotate-',
|
507
|
+
rotate24 = 'mddtp-picker__cell--rotate24',
|
473
508
|
cell = 'mddtp-picker__cell',
|
474
509
|
docfrag = document.createDocumentFragment(),
|
475
510
|
hourNow = void 0;
|
476
511
|
|
477
512
|
if (this._mode) {
|
513
|
+
var degreeStep = this._inner24 === !0 ? 10 : 5;
|
478
514
|
hourNow = parseInt(this._sDialog.tDate.format('H'), 10);
|
479
|
-
for (var i = 1, j =
|
515
|
+
for (var i = 1, j = degreeStep; i <= 24; i++, j += degreeStep) {
|
480
516
|
var div = document.createElement('div'),
|
481
517
|
span = document.createElement('span');
|
482
518
|
|
@@ -487,17 +523,24 @@
|
|
487
523
|
} else {
|
488
524
|
span.textContent = i;
|
489
525
|
}
|
490
|
-
|
526
|
+
|
527
|
+
var position = j;
|
528
|
+
if (this._inner24 === !0 && i > 12) {
|
529
|
+
position -= 120;
|
530
|
+
div.classList.add(rotate24);
|
531
|
+
}
|
532
|
+
|
533
|
+
div.classList.add(rotate + position);
|
491
534
|
if (hourNow === i) {
|
492
535
|
div.id = hour;
|
493
536
|
div.classList.add(selected);
|
494
|
-
needle.classList.add(rotate +
|
537
|
+
needle.classList.add(rotate + position);
|
495
538
|
}
|
496
539
|
// CHANGED exception case for 24 => 0 issue #58
|
497
540
|
if (i === 24 && hourNow === 0) {
|
498
541
|
div.id = hour;
|
499
542
|
div.classList.add(selected);
|
500
|
-
needle.classList.add(rotate +
|
543
|
+
needle.classList.add(rotate + position);
|
501
544
|
}
|
502
545
|
div.appendChild(span);
|
503
546
|
docfrag.appendChild(div);
|
@@ -590,7 +633,6 @@
|
|
590
633
|
key: '_initViewHolder',
|
591
634
|
value: function _initViewHolder() {
|
592
635
|
var m = this._sDialog.tDate,
|
593
|
-
picker = this._sDialog.picker,
|
594
636
|
current = this._sDialog.current,
|
595
637
|
previous = this._sDialog.previous,
|
596
638
|
next = this._sDialog.next,
|
@@ -715,6 +757,14 @@
|
|
715
757
|
me._switchToDateView(el, me);
|
716
758
|
};
|
717
759
|
} else {
|
760
|
+
if (this._inner24 === !0 && me._mode) {
|
761
|
+
if (parseInt(me._sDialog.sDate.format('H'), 10) > 12) {
|
762
|
+
me._sDialog.needle.classList.add('mddtp-picker__cell--rotate24');
|
763
|
+
} else {
|
764
|
+
me._sDialog.needle.classList.remove('mddtp-picker__cell--rotate24');
|
765
|
+
}
|
766
|
+
}
|
767
|
+
|
718
768
|
el.onclick = function () {
|
719
769
|
me._switchToTimeView(me);
|
720
770
|
};
|
@@ -747,13 +797,17 @@
|
|
747
797
|
needle.classList.add(selection);
|
748
798
|
if (mdDateTimePicker.dialog.view) {
|
749
799
|
value = me._sDialog.sDate.format('m');
|
750
|
-
// move the fakeNeedle to correct position
|
751
|
-
setTimeout(function () {
|
752
|
-
var hOffset = circularHolder.getBoundingClientRect(),
|
753
|
-
cOffset = circle.getBoundingClientRect();
|
754
800
|
|
755
|
-
|
756
|
-
|
801
|
+
// Need to desactivate for the autoClose mode as it mess things up. If you have an idea, feel free to give it a shot !
|
802
|
+
if (me._autoClose !== !0) {
|
803
|
+
// move the fakeNeedle to correct position
|
804
|
+
setTimeout(function () {
|
805
|
+
var hOffset = circularHolder.getBoundingClientRect(),
|
806
|
+
cOffset = circle.getBoundingClientRect();
|
807
|
+
|
808
|
+
fakeNeedle.setAttribute('style', 'left:' + (cOffset.left - hOffset.left) + 'px;top:' + (cOffset.top - hOffset.top) + 'px');
|
809
|
+
}, 300);
|
810
|
+
}
|
757
811
|
} else {
|
758
812
|
if (me._mode) {
|
759
813
|
spoke = 24;
|
@@ -865,6 +919,10 @@
|
|
865
919
|
me._sDialog.minute.textContent = setMinute;
|
866
920
|
// switch the view
|
867
921
|
me._switchToTimeView(me);
|
922
|
+
|
923
|
+
if (me._autoClose === !0) {
|
924
|
+
me._sDialog.ok.onclick();
|
925
|
+
}
|
868
926
|
}
|
869
927
|
};
|
870
928
|
}
|
@@ -874,8 +932,7 @@
|
|
874
932
|
var me = this;
|
875
933
|
el.onclick = function (e) {
|
876
934
|
if (e.target && e.target.nodeName == 'SPAN' && e.target.classList.contains('mddtp-picker__cell')) {
|
877
|
-
var
|
878
|
-
day = e.target.textContent,
|
935
|
+
var day = e.target.textContent,
|
879
936
|
currentDate = me._sDialog.tDate.date(day),
|
880
937
|
sId = 'mddtp-date__selected',
|
881
938
|
sClass = 'mddtp-picker__cell--selected',
|
@@ -897,6 +954,10 @@
|
|
897
954
|
me._fillText(subtitle, currentDate.year());
|
898
955
|
me._fillText(titleDay, currentDate.format('ddd, '));
|
899
956
|
me._fillText(titleMonth, currentDate.format('MMM D'));
|
957
|
+
|
958
|
+
if (me._autoClose === !0) {
|
959
|
+
me._sDialog.ok.onclick();
|
960
|
+
}
|
900
961
|
}
|
901
962
|
};
|
902
963
|
}
|
@@ -1044,7 +1105,12 @@
|
|
1044
1105
|
PM = this._sDialog.PM;
|
1045
1106
|
|
1046
1107
|
AM.onclick = function (e) {
|
1047
|
-
|
1108
|
+
//let m = me._sDialog.sDate.format('A')
|
1109
|
+
// Change Locale Meridiem to AM/PM String
|
1110
|
+
var m = 'AM';
|
1111
|
+
if (me._sDialog.sDate._locale.isPM(me._sDialog.sDate.format('A'))) {
|
1112
|
+
m = 'PM';
|
1113
|
+
}
|
1048
1114
|
if (m === 'PM') {
|
1049
1115
|
me._sDialog.sDate.subtract(12, 'h');
|
1050
1116
|
AM.classList.toggle('mddtp-picker__color--active');
|
@@ -1052,7 +1118,12 @@
|
|
1052
1118
|
}
|
1053
1119
|
};
|
1054
1120
|
PM.onclick = function (e) {
|
1055
|
-
|
1121
|
+
//let m = me._sDialog.sDate.format('A')
|
1122
|
+
// Change Locale Meridiem to AM/PM String
|
1123
|
+
var m = 'AM';
|
1124
|
+
if (me._sDialog.sDate._locale.isPM(me._sDialog.sDate.format('A'))) {
|
1125
|
+
m = 'PM';
|
1126
|
+
}
|
1056
1127
|
if (m === 'AM') {
|
1057
1128
|
me._sDialog.sDate.add(12, 'h');
|
1058
1129
|
AM.classList.toggle('mddtp-picker__color--active');
|
@@ -1079,12 +1150,38 @@
|
|
1079
1150
|
containment: !0
|
1080
1151
|
});
|
1081
1152
|
|
1082
|
-
fakeNeedleDraggabilly.on('pointerDown', function () {
|
1153
|
+
fakeNeedleDraggabilly.on('pointerDown', function (e) {
|
1154
|
+
//console.info ( 'pointerDown' , e );
|
1083
1155
|
hOffset = circularHolder.getBoundingClientRect();
|
1084
1156
|
});
|
1085
|
-
|
1086
|
-
|
1087
|
-
|
1157
|
+
/**
|
1158
|
+
* netTrek
|
1159
|
+
* fixes for iOS - drag
|
1160
|
+
*/
|
1161
|
+
fakeNeedleDraggabilly.on('pointerMove', function (e) {
|
1162
|
+
|
1163
|
+
var clientX = e.clientX,
|
1164
|
+
clientY = e.clientY;
|
1165
|
+
|
1166
|
+
|
1167
|
+
if (clientX === undefined) {
|
1168
|
+
|
1169
|
+
if (e.pageX === undefined) {
|
1170
|
+
if (e.touches && e.touches.length > 0) {
|
1171
|
+
clientX = e.touches[0].clientX;
|
1172
|
+
clientY = e.touches[0].clientY;
|
1173
|
+
} else {
|
1174
|
+
console.error('coult not detect pageX, pageY');
|
1175
|
+
}
|
1176
|
+
} else {
|
1177
|
+
clientX = pageX - document.body.scrollLeft - document.documentElement.scrollLeft;
|
1178
|
+
clientY = pageY - document.body.scrollTop - document.documentElement.scrollTop;
|
1179
|
+
}
|
1180
|
+
}
|
1181
|
+
//console.info ( 'Drag clientX' , clientX, clientY, e );
|
1182
|
+
|
1183
|
+
var xPos = clientX - hOffset.left - hOffset.width / 2,
|
1184
|
+
yPos = clientY - hOffset.top - hOffset.height / 2,
|
1088
1185
|
slope = Math.atan2(-yPos, xPos);
|
1089
1186
|
|
1090
1187
|
needle.className = '';
|
@@ -1108,7 +1205,11 @@
|
|
1108
1205
|
needle.classList.add(quick);
|
1109
1206
|
needle.classList.add(rotate + divides * 2);
|
1110
1207
|
});
|
1111
|
-
|
1208
|
+
/**
|
1209
|
+
* netTrek
|
1210
|
+
* fixes for iOS - drag
|
1211
|
+
*/
|
1212
|
+
fakeNeedleDraggabilly.on('pointerUp', function (e) {
|
1112
1213
|
var minuteViewChildren = me._sDialog.minuteView.getElementsByTagName('div'),
|
1113
1214
|
sMinute = 'mddtp-minute__selected',
|
1114
1215
|
selectedMinute = document.getElementById(sMinute),
|
@@ -1258,7 +1359,6 @@
|
|
1258
1359
|
}, {
|
1259
1360
|
key: '_calcRotation',
|
1260
1361
|
value: function _calcRotation(spoke, value) {
|
1261
|
-
var start = spoke / 12 * 3;
|
1262
1362
|
// set clocks top and right side value
|
1263
1363
|
if (spoke === 12) {
|
1264
1364
|
value *= 10;
|
@@ -1312,4 +1412,4 @@
|
|
1312
1412
|
};
|
1313
1413
|
|
1314
1414
|
exports.default = mdDateTimePicker;
|
1315
|
-
});
|
1415
|
+
});
|