lddatetimepicker 0.0.5 → 0.0.8
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.
- package/CHANGELOG.md +20 -0
- package/README.md +19 -0
- package/index.css +34 -3
- package/index.js +92 -24
- package/index.min.css +1 -1
- package/index.min.js +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,25 @@
|
|
|
1
1
|
# Change Logs
|
|
2
2
|
|
|
3
|
+
## v0.0.8
|
|
4
|
+
|
|
5
|
+
- proper handle invalid input
|
|
6
|
+
- add `mode` with following mode supported:
|
|
7
|
+
- `in-place`: default value. widget is inserted after `host`.
|
|
8
|
+
- `out-place`: widget is inserted under `document.body`.
|
|
9
|
+
- `fixed`: widget is inserted under `document.body`, with fixed position style.
|
|
10
|
+
- support `container` option for customized modal window.
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
## v0.0.7
|
|
14
|
+
|
|
15
|
+
- support `fixed` option for fixed mode. fixed mode is automatically enabled if no host provided.
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
## v0.0.6
|
|
19
|
+
|
|
20
|
+
- even if `count-scroll = false` we should still consider scroll position to keep picker in viewport as possible.
|
|
21
|
+
|
|
22
|
+
|
|
3
23
|
## v0.0.5
|
|
4
24
|
|
|
5
25
|
- support `change` event when value changed.
|
package/README.md
CHANGED
|
@@ -29,6 +29,25 @@ Constructor options:
|
|
|
29
29
|
|
|
30
30
|
- `host`: host element ( should be an input element, if provided )
|
|
31
31
|
- `time`: default true. hide and disable time picker if false.
|
|
32
|
+
- `fixed`: (deprecated) default false. true to enabled fixed mode.
|
|
33
|
+
- `mode`: either `in-place`, `out-place` or `fixed`.
|
|
34
|
+
- `fixed`:
|
|
35
|
+
- when toggled, the datetime widget pops up in screen center, and covers the whole screen.
|
|
36
|
+
- will be forced to true if `host` and `container` are not provided.
|
|
37
|
+
- `out-place`: widget is inserted under body.
|
|
38
|
+
- `in-place`: widget is inserted after `host`.
|
|
39
|
+
- `container`: optional. if provided, `lddatetimepicker` are rendered barely in this container.
|
|
40
|
+
- this should be an object with following fields:
|
|
41
|
+
- `node`: required. container element.
|
|
42
|
+
- `toggle(v)`: required. function for toggling container on / off.
|
|
43
|
+
- `isOn()`: required. return true if a container is toggled on, otherwise false.
|
|
44
|
+
- `position({x,y,ix,iy})`: optional. use this function to correctly position container.
|
|
45
|
+
- `x`: suggested x position
|
|
46
|
+
- `y`: suggested y position
|
|
47
|
+
- `ix`: suggested x position if mode is `in-place`.
|
|
48
|
+
- `iy`: suggested y position if mode is `in-place`.
|
|
49
|
+
- by default, mode will be `out-place` with `container` option set.
|
|
50
|
+
- Set `mode` to `fixed` if the container is a fixed element (such as dialog)
|
|
32
51
|
|
|
33
52
|
|
|
34
53
|
## API
|
package/index.css
CHANGED
|
@@ -27,20 +27,51 @@
|
|
|
27
27
|
.lddtp {
|
|
28
28
|
position: absolute;
|
|
29
29
|
z-index: 100;
|
|
30
|
+
display: none;
|
|
31
|
+
}
|
|
32
|
+
.lddtp div {
|
|
33
|
+
user-select: none;
|
|
34
|
+
}
|
|
35
|
+
.lddtp,
|
|
36
|
+
.lddtp.active.fixed > div {
|
|
30
37
|
width: 300px;
|
|
31
38
|
border: 1px solid #d6d7d8;
|
|
32
39
|
border-radius: 0.25em;
|
|
33
40
|
background: #fff;
|
|
34
41
|
box-shadow: 0 3px 5px rgba(0,0,0,0.1);
|
|
35
42
|
cursor: pointer;
|
|
36
|
-
display: none;
|
|
37
43
|
}
|
|
38
|
-
.lddtp
|
|
39
|
-
|
|
44
|
+
.lddtp.bare {
|
|
45
|
+
border: 0;
|
|
46
|
+
box-shadow: none;
|
|
47
|
+
border-radius: 0;
|
|
48
|
+
}
|
|
49
|
+
.lddtp.static {
|
|
50
|
+
position: relative;
|
|
51
|
+
display: block;
|
|
40
52
|
}
|
|
41
53
|
.lddtp.active {
|
|
42
54
|
display: block;
|
|
43
55
|
}
|
|
56
|
+
.lddtp.active.fixed {
|
|
57
|
+
position: fixed;
|
|
58
|
+
top: 0;
|
|
59
|
+
left: 0;
|
|
60
|
+
right: 0;
|
|
61
|
+
bottom: 0;
|
|
62
|
+
width: auto;
|
|
63
|
+
z-index: 2000;
|
|
64
|
+
border: 0;
|
|
65
|
+
box-shadow: none;
|
|
66
|
+
border-radius: 0;
|
|
67
|
+
background: rgba(0,0,0,0.75);
|
|
68
|
+
}
|
|
69
|
+
.lddtp.active.fixed > div {
|
|
70
|
+
position: absolute;
|
|
71
|
+
top: 50%;
|
|
72
|
+
left: 50%;
|
|
73
|
+
transform: translate(-50%, -50%);
|
|
74
|
+
}
|
|
44
75
|
.lddtp-ds {
|
|
45
76
|
height: 250px;
|
|
46
77
|
display: grid;
|
package/index.js
CHANGED
|
@@ -1,20 +1,34 @@
|
|
|
1
1
|
(function(){
|
|
2
2
|
var html, lddatetimepicker;
|
|
3
|
-
html = '<div class="lddtp">\n <div class="lddtp-h">\n <div class="lddtp-a" data-action="-"></div>\n <div class="lddtp-f"><select class="lddtp-month-sel"></select></div>\n <div class="lddtp-f"><input class="lddtp-year-sel" type="number"/></div>\n <div class="lddtp-a" data-action="+"></div>\n </div>\n <div class="lddtp-ds">\n </div>\n <div class="lddtp-t">\n <div class="lddtp-f"><select class="lddtp-hour-sel"></select></div>\n <div><b>:</b></div>\n <div class="lddtp-f"><select class="lddtp-minute-sel"></select></div>\n </div>\n</div>';
|
|
3
|
+
html = '<div class="lddtp"><div>\n <div class="lddtp-h">\n <div class="lddtp-a" data-action="-"></div>\n <div class="lddtp-f"><select class="lddtp-month-sel"></select></div>\n <div class="lddtp-f"><input class="lddtp-year-sel" type="number"/></div>\n <div class="lddtp-a" data-action="+"></div>\n </div>\n <div class="lddtp-ds">\n </div>\n <div class="lddtp-t">\n <div class="lddtp-f"><select class="lddtp-hour-sel"></select></div>\n <div><b>:</b></div>\n <div class="lddtp-f"><select class="lddtp-minute-sel"></select></div>\n </div>\n</div></div>';
|
|
4
4
|
lddatetimepicker = function(opt){
|
|
5
|
-
var div, r,
|
|
5
|
+
var ref$, _c, div, r, x$, _handler, e, this$ = this;
|
|
6
6
|
opt == null && (opt = {});
|
|
7
7
|
this.opt = opt;
|
|
8
8
|
this._enabled = {
|
|
9
9
|
time: !(opt.time != null) || opt.time
|
|
10
10
|
};
|
|
11
|
+
this._mode = (ref$ = opt.mode) === 'in-place' || ref$ === 'out-place' || ref$ === 'fixed'
|
|
12
|
+
? opt.mode
|
|
13
|
+
: opt.fixed
|
|
14
|
+
? 'fixed'
|
|
15
|
+
: opt.container ? 'out-place' : 'in-place';
|
|
11
16
|
this.evthdr = {};
|
|
17
|
+
if (_c = opt.container) {
|
|
18
|
+
if (!(typeof _c === 'object' && _c.isOn && _c.toggle && _c.node)) {
|
|
19
|
+
throw new Error("[lddatetimepicker] `isOn`, `toggle` and `node` are all required within `container` option.");
|
|
20
|
+
}
|
|
21
|
+
this._toggle = _c.toggle;
|
|
22
|
+
this.isOn = _c.isOn;
|
|
23
|
+
this._container = _c.node;
|
|
24
|
+
this._pos = _c.position;
|
|
25
|
+
}
|
|
12
26
|
this.hdr = {
|
|
13
27
|
mouseup: function(evt){
|
|
14
28
|
if (evt.target === this$.host) {
|
|
15
29
|
return;
|
|
16
30
|
}
|
|
17
|
-
this$.
|
|
31
|
+
this$._toggle(false);
|
|
18
32
|
document.removeEventListener('mouseup', this$.hdr.mouseup);
|
|
19
33
|
return document.removeEventListener('keydown', this$.hdr.keydown);
|
|
20
34
|
},
|
|
@@ -51,15 +65,23 @@
|
|
|
51
65
|
this.host = typeof opt.host === 'string'
|
|
52
66
|
? document.querySelector(opt.host)
|
|
53
67
|
: opt.host;
|
|
54
|
-
this.host.parentNode.insertBefore(div, opt.host.nextSibling);
|
|
55
68
|
this.host.addEventListener('mouseup', function(evt){
|
|
56
69
|
return this$.toggle();
|
|
57
70
|
});
|
|
58
|
-
} else {
|
|
59
|
-
document.body.appendChild(div);
|
|
60
71
|
}
|
|
61
72
|
div.innerHTML = html;
|
|
62
73
|
this.root = r = div.querySelector('.lddtp');
|
|
74
|
+
if (this._container) {
|
|
75
|
+
this._container.appendChild(div);
|
|
76
|
+
this.root.classList.add('static', 'bare');
|
|
77
|
+
} else if (this._mode === 'out-place') {
|
|
78
|
+
document.body.appendChild(div);
|
|
79
|
+
} else if (this._mode === 'fixed' || !this.host) {
|
|
80
|
+
document.body.appendChild(div);
|
|
81
|
+
this.root.classList.toggle('fixed');
|
|
82
|
+
} else if (this.host) {
|
|
83
|
+
this.host.parentNode.insertBefore(div, opt.host.nextSibling);
|
|
84
|
+
}
|
|
63
85
|
this.root.addEventListener('mouseup', function(evt){
|
|
64
86
|
return evt.stopPropagation();
|
|
65
87
|
});
|
|
@@ -102,6 +124,9 @@
|
|
|
102
124
|
}).join('');
|
|
103
125
|
this.root.addEventListener('click', function(evt){
|
|
104
126
|
var n;
|
|
127
|
+
if (this$._mode === 'fixed' && evt.target.classList.contains('fixed')) {
|
|
128
|
+
return this$.toggle(false);
|
|
129
|
+
}
|
|
105
130
|
n = evt.target;
|
|
106
131
|
if (n.classList.contains('lddtp-d')) {
|
|
107
132
|
this$.sel = dayjs(new Date(n.date.year, n.date.month, n.date.date, this$.sel.hour(), this$.sel.minute()));
|
|
@@ -182,13 +207,16 @@
|
|
|
182
207
|
isOn: function(){
|
|
183
208
|
return this.root.classList.contains('active');
|
|
184
209
|
},
|
|
210
|
+
_toggle: function(v){
|
|
211
|
+
return this.root.classList.toggle('active', v);
|
|
212
|
+
},
|
|
185
213
|
toggle: function(v){
|
|
186
|
-
var c, h, n, hb, cb, ref$, x, y, nscroll, nstack, countScroll, s, stackb, scrollb, scroll;
|
|
214
|
+
var c, h, n, hb, cb, ref$, x, y, nscroll, nstack, countScroll, s, stackb, scrollb, scroll, rscroll, _cb, vy, vx, iy, ix;
|
|
187
215
|
if (arguments.length === 0) {
|
|
188
|
-
v = !this.
|
|
216
|
+
v = !this.isOn();
|
|
189
217
|
}
|
|
190
218
|
if (!v) {
|
|
191
|
-
this.
|
|
219
|
+
this._toggle(false);
|
|
192
220
|
document.removeEventListener('mouseup', this.hdr.mouseup);
|
|
193
221
|
document.removeEventListener('keydown', this.hdr.keydown);
|
|
194
222
|
return;
|
|
@@ -197,7 +225,10 @@
|
|
|
197
225
|
document.addEventListener('mouseup', this.hdr.mouseup);
|
|
198
226
|
document.addEventListener('keydown', this.hdr.keydown);
|
|
199
227
|
}
|
|
200
|
-
this.
|
|
228
|
+
this._toggle(true);
|
|
229
|
+
if (this._mode === 'fixed') {
|
|
230
|
+
return;
|
|
231
|
+
}
|
|
201
232
|
c = this.root;
|
|
202
233
|
h = this.host;
|
|
203
234
|
n = h.parentNode;
|
|
@@ -208,7 +239,12 @@
|
|
|
208
239
|
countScroll = true;
|
|
209
240
|
while (n && n.getAttribute) {
|
|
210
241
|
s = getComputedStyle(n);
|
|
211
|
-
if (n.nodeName === 'BODY'
|
|
242
|
+
if (n.nodeName === 'BODY') {
|
|
243
|
+
if (!nscroll) {
|
|
244
|
+
nscroll = document.scrollingElement;
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
if (['overflow', 'overflow-y', 'overflow-x'].filter(fn$).length) {
|
|
212
248
|
if (!nscroll) {
|
|
213
249
|
nscroll = n;
|
|
214
250
|
}
|
|
@@ -228,25 +264,53 @@
|
|
|
228
264
|
}
|
|
229
265
|
stackb = nstack.getBoundingClientRect();
|
|
230
266
|
scrollb = nscroll.getBoundingClientRect();
|
|
231
|
-
scroll =
|
|
267
|
+
scroll = {
|
|
268
|
+
left: nscroll.scrollLeft,
|
|
269
|
+
top: nscroll.scrollTop
|
|
270
|
+
};
|
|
271
|
+
rscroll = this._mode === 'fixed'
|
|
232
272
|
? {
|
|
233
|
-
left: nscroll.scrollLeft,
|
|
234
|
-
top: nscroll.scrollTop
|
|
235
|
-
}
|
|
236
|
-
: {
|
|
237
273
|
left: 0,
|
|
238
274
|
top: 0
|
|
275
|
+
}
|
|
276
|
+
: {
|
|
277
|
+
left: document.scrollingElement.scrollLeft,
|
|
278
|
+
top: document.scrollingElement.scrollTop
|
|
239
279
|
};
|
|
240
|
-
|
|
241
|
-
|
|
280
|
+
_cb = this._container ? this._container.getBoundingClientRect() : cb;
|
|
281
|
+
if (hb.y + hb.height + _cb.height > window.innerHeight + rscroll.top) {
|
|
282
|
+
vy = hb.y - _cb.height + rscroll.top - 2;
|
|
242
283
|
} else {
|
|
243
|
-
|
|
284
|
+
vy = hb.y + hb.height + rscroll.top + 2;
|
|
244
285
|
}
|
|
245
|
-
if (hb.x +
|
|
246
|
-
|
|
286
|
+
if (hb.x + _cb.width > window.innerWidth + rscroll.left) {
|
|
287
|
+
vx = hb.x + hb.width - +rscroll.left + _cb.width;
|
|
247
288
|
} else {
|
|
248
|
-
|
|
289
|
+
vx = hb.x + rscroll.left;
|
|
249
290
|
}
|
|
291
|
+
if (hb.y + hb.height + cb.height > scrollb.y + scrollb.height + scroll.top) {
|
|
292
|
+
iy = hb.y - stackb.y - cb.height + (countScroll ? scroll.top : 0) - 2;
|
|
293
|
+
} else {
|
|
294
|
+
iy = hb.y - stackb.y + hb.height + (countScroll ? scroll.top : 0) + 2;
|
|
295
|
+
}
|
|
296
|
+
if (hb.x + cb.width > scrollb.x + scrollb.width + scroll.left) {
|
|
297
|
+
ix = hb.x - stackb.x + hb.width - cb.width + (countScroll ? scroll.left : 0);
|
|
298
|
+
} else {
|
|
299
|
+
ix = hb.x - stackb.x + (countScroll ? scroll.left : 0);
|
|
300
|
+
}
|
|
301
|
+
if (this._pos) {
|
|
302
|
+
return this._pos({
|
|
303
|
+
x: vx,
|
|
304
|
+
y: vy,
|
|
305
|
+
vx: vx,
|
|
306
|
+
vy: vy,
|
|
307
|
+
ix: ix,
|
|
308
|
+
iy: iy
|
|
309
|
+
});
|
|
310
|
+
}
|
|
311
|
+
ref$ = this._mode === 'out-place'
|
|
312
|
+
? (ref$ = [vx, vy], x = ref$[0], y = ref$[1], ref$)
|
|
313
|
+
: [ix, iy], x = ref$[0], y = ref$[1];
|
|
250
314
|
c.style.transform = "translate(" + x + "px, " + y + "px)";
|
|
251
315
|
return ref$ = c.style, ref$.top = 0, ref$.left = 0, ref$;
|
|
252
316
|
function fn$(it){
|
|
@@ -301,8 +365,12 @@
|
|
|
301
365
|
return dayjs(new Date(this.sel.year(), this.sel.month(), this.sel.date())).format('YYYY-MM-DD');
|
|
302
366
|
}
|
|
303
367
|
}
|
|
304
|
-
|
|
305
|
-
|
|
368
|
+
v = dayjs(v);
|
|
369
|
+
if (!v.isValid()) {
|
|
370
|
+
v = this._last || dayjs();
|
|
371
|
+
}
|
|
372
|
+
this._last = this.cur;
|
|
373
|
+
this.sel = this.cur = v;
|
|
306
374
|
return this.update();
|
|
307
375
|
}
|
|
308
376
|
});
|
package/index.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.lddtp-h{display:grid;grid-template-columns:1fr 2.5fr 2.5fr 1fr;padding:.33em 0}.lddtp-h div{border-radius:.25em;display:flex;align-items:center;justify-content:center;margin:1px}.lddtp-h .info{flex:1 0 auto;text-align:center}.lddtp-a:before,.lddtp-a:after{display:block}.lddtp-a:first-child:before{content:"\25c0"}.lddtp-a:last-child:before{content:"\25ba"}.lddtp{position:absolute;z-index:100;width:300px;border:1px solid #d6d7d8;border-radius:.25em;background:#fff;box-shadow:0 3px 5px rgba(0,0,0,0.1);cursor:pointer;
|
|
1
|
+
.lddtp-h{display:grid;grid-template-columns:1fr 2.5fr 2.5fr 1fr;padding:.33em 0}.lddtp-h div{border-radius:.25em;display:flex;align-items:center;justify-content:center;margin:1px}.lddtp-h .info{flex:1 0 auto;text-align:center}.lddtp-a:before,.lddtp-a:after{display:block}.lddtp-a:first-child:before{content:"\25c0"}.lddtp-a:last-child:before{content:"\25ba"}.lddtp{position:absolute;z-index:100;display:none}.lddtp div{user-select:none}.lddtp,.lddtp.active.fixed>div{width:300px;border:1px solid #d6d7d8;border-radius:.25em;background:#fff;box-shadow:0 3px 5px rgba(0,0,0,0.1);cursor:pointer}.lddtp.bare{border:0;box-shadow:none;border-radius:0}.lddtp.static{position:relative;display:block}.lddtp.active{display:block}.lddtp.active.fixed{position:fixed;top:0;left:0;right:0;bottom:0;width:auto;z-index:2000;border:0;box-shadow:none;border-radius:0;background:rgba(0,0,0,0.75)}.lddtp.active.fixed>div{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.lddtp-ds{height:250px;display:grid;grid-template:.8fr repeat(6,1fr) / repeat(7,1fr);border-bottom:1px solid #e7e8e9;border-top:1px solid #e7e8e9}.lddtp-ds div{margin:1px;overflow:hidden;display:flex;position:relative;align-items:center;justify-content:center}.lddtp-ds .dim{color:#ccc;background:#f7f8f9}.lddtp-ds .today:before{display:block;content:" ";border-radius:50%;width:6px;height:6px;position:absolute;top:4px;left:4px;background:#0f0}.lddtp-w{font-size:.8em;font-weight:700}.lddtp-d.selected{background:#00f;color:#fff;border-radius:.25em;font-weight:700}.lddtp-t{display:grid;grid-template-columns:1fr 5px 1fr}.lddtp-t div{height:2.5em;display:flex;align-items:center}.lddtp-t .lddtp-f input,.lddtp-h .lddtp-f input,.lddtp-t .lddtp-f select,.lddtp-h .lddtp-f select{height:100%;width:100%;border:0;outline:0;text-align:center}
|
package/index.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(){var t;(t=function(t){var e,s=this;if(this.opt=t=null==t?{}:t,this._enabled={time:!(null!=t.time)||t.time},this.evthdr={},this.hdr={mouseup:function(t){if(t.target!==
|
|
1
|
+
!function(){var t;(t=function(t){var e,n,s,i=this;if(this.opt=t=null==t?{}:t,this._enabled={time:!(null!=t.time)||t.time},this._mode="in-place"===(e=t.mode)||"out-place"===e||"fixed"===e?t.mode:t.fixed?"fixed":t.container?"out-place":"in-place",this.evthdr={},s=t.container){if(!("object"==typeof s&&s.isOn&&s.toggle&&s.node))throw new Error("[lddatetimepicker] `isOn`, `toggle` and `node` are all required within `container` option.");this._toggle=s.toggle,this.isOn=s.isOn,this._container=s.node,this._pos=s.position}if(this.hdr={mouseup:function(t){if(t.target!==i.host)return i._toggle(!1),document.removeEventListener("mouseup",i.hdr.mouseup),document.removeEventListener("keydown",i.hdr.keydown)},keydown:function(t){var e;if(i.isOn()&&(13===(e=t.keyCode)||27===e||37===e||38===e||39===e||40===e)&&i.sel)return 13===e||27===e?i.toggle(!1):(t.stopPropagation(),t.preventDefault(),i.sel=37===e?i.sel.subtract(1,"day"):39===e?i.sel.add(1,"day"):38===e?i.sel.subtract(7,"day"):40===e?i.sel.add(7,"day"):void 0,i.cur=i.sel,i.update())}},s=document.createElement("div"),t.host&&(this.host="string"==typeof t.host?document.querySelector(t.host):t.host,this.host.addEventListener("mouseup",function(t){return i.toggle()})),s.innerHTML='<div class="lddtp"><div>\n <div class="lddtp-h">\n <div class="lddtp-a" data-action="-"></div>\n <div class="lddtp-f"><select class="lddtp-month-sel"></select></div>\n <div class="lddtp-f"><input class="lddtp-year-sel" type="number"/></div>\n <div class="lddtp-a" data-action="+"></div>\n </div>\n <div class="lddtp-ds">\n </div>\n <div class="lddtp-t">\n <div class="lddtp-f"><select class="lddtp-hour-sel"></select></div>\n <div><b>:</b></div>\n <div class="lddtp-f"><select class="lddtp-minute-sel"></select></div>\n </div>\n</div></div>',this.root=n=s.querySelector(".lddtp"),this._container?(this._container.appendChild(s),this.root.classList.add("static","bare")):"out-place"===this._mode?document.body.appendChild(s):"fixed"!==this._mode&&this.host?this.host&&this.host.parentNode.insertBefore(s,t.host.nextSibling):(document.body.appendChild(s),this.root.classList.toggle("fixed")),this.root.addEventListener("mouseup",function(t){return t.stopPropagation()}),this.n={ds:n.querySelector(".lddtp-ds"),t:n.querySelector(".lddtp-t"),sel:{year:n.querySelector(".lddtp-year-sel"),month:n.querySelector(".lddtp-month-sel"),hour:n.querySelector(".lddtp-hour-sel"),minute:n.querySelector(".lddtp-minute-sel")}},this.n.t.style.display=this._enabled.time?"":"none",this.months=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],this.wdays=["SUN","MON","TUE","WED","THR","FRI","SAT"],this.n.ds.innerHTML=[0,1,2,3,4,5,6].map(function(t){return'<div class="lddtp-w">'+i.wdays[t]+"</div>"}).join("")+[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41].map(function(t){return'<div class="lddtp-d"></div>'}).join(""),(e=this.n).dh=Array.from(n.querySelectorAll(".lddtp-w")),e.dc=Array.from(n.querySelectorAll(".lddtp-d")),e=[0,1,2].map(function(){return dayjs()}),this.cur=e[0],this.today=e[1],this.sel=e[2],this.n.sel.month.innerHTML=this.months.map(function(t){return'<option value="'+t+'">'+t+"</option>"}).join(""),(t=this.n.sel.year).setAttribute("min",1900),t.setAttribute("max",2300),t.setAttribute("value",this.today.year()),this.n.sel.hour.innerHTML=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23].map(function(t){return'<option value="'+t+'">'+(""+t).padStart(2,"0")+"</option>"}).join(""),this.n.sel.minute.innerHTML=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59].map(function(t){return'<option value="'+t+'">'+(""+t).padStart(2,"0")+"</option>"}).join(""),this.root.addEventListener("click",function(t){return"fixed"===i._mode&&t.target.classList.contains("fixed")?i.toggle(!1):(t=t.target).classList.contains("lddtp-d")?(i.sel=dayjs(new Date(t.date.year,t.date.month,t.date.date,i.sel.hour(),i.sel.minute())),i.update(i.cur)):"-"===t.getAttribute("data-action")?(i.cur=i.cur.subtract(1,"month"),i.update(i.cur)):"+"===t.getAttribute("data-action")?(i.cur=i.cur.add(1,"month"),i.update(i.cur)):void 0}),this.n.sel.minute.addEventListener("change",function(t){return i.sel=i.sel.minute(t.target.value),i.update()}),this.n.sel.hour.addEventListener("change",function(t){return i.sel=i.sel.hour(t.target.value),i.update()}),this.n.sel.year.addEventListener("change",function(t){return i.cur=dayjs(new Date(i.n.sel.year.value,i.months.indexOf(i.n.sel.month.value),1)),i.update(i.cur)}),this.n.sel.month.addEventListener("change",function(t){return i.cur=dayjs(new Date(i.n.sel.year.value,i.months.indexOf(i.n.sel.month.value),1)),i.update(i.cur)}),this.host&&(s=debounce(function(){var t;try{return t=dayjs(i.host.value).format("YYYY-MM-DDTHH:mm:ssZ"),i.host.value=t,i.value(i.host.value)}catch(t){return t}}),this.host.addEventListener("change",s),this.host.addEventListener("input",s)),this.host&&this.host.value)try{this.host.value=dayjs(this.host.value).format("YYYY-MM-DDTHH:mm:ssZ"),this.value(this.host.value)}catch(t){0}else this.update();return this}).prototype=function(t,e){var n,s={}.hasOwnProperty;for(n in e)s.call(e,n)&&(t[n]=e[n]);return t}(Object.create(Object.prototype),{on:function(t,n){var s=this;return(Array.isArray(t)?t:[t]).map(function(t){var e;return((e=s.evthdr)[t]||(e[t]=[])).push(n)})},fire:function(t){for(var e,n,s,i,o=[],d=[],r=1,l=arguments.length;r<l;++r)d.push(arguments[r]);for(e=d,r=0,s=(n=this.evthdr[t]||[]).length;r<s;++r)i=n[r],o.push(i.apply(this,e));return o},isOn:function(){return this.root.classList.contains("active")},_toggle:function(t){return this.root.classList.toggle("active",t)},toggle:function(t){var e,n,s,i,o,d,r,l,a,h,u,c,p,m,v,y,f;if(!(t=0===arguments.length?!this.isOn():t))return this._toggle(!1),document.removeEventListener("mouseup",this.hdr.mouseup),void document.removeEventListener("keydown",this.hdr.keydown);if(this.isOn()||(document.addEventListener("mouseup",this.hdr.mouseup),document.addEventListener("keydown",this.hdr.keydown)),this._toggle(!0),"fixed"!==this._mode){for(e=this.root,n=(s=this.host).parentNode,s=s.getBoundingClientRect(),i=e.getBoundingClientRect(),d=(o=[0,0])[0],r=o[1],l=(o=[null,null])[0],a=o[1],h=!0;n&&n.getAttribute&&(u=getComputedStyle(n),"BODY"===n.nodeName&&(l=l||document.scrollingElement),["overflow","overflow-y","overflow-x"].filter(g).length&&(l=l||n),"BODY"!==n.nodeName&&"static"===u.position||a||(a=n,l||(h=!1)),!l||!a);)n=n.parentNode;return(c=a.getBoundingClientRect(),f=l.getBoundingClientRect(),p={left:l.scrollLeft,top:l.scrollTop},y="fixed"===this._mode?{left:0,top:0}:{left:document.scrollingElement.scrollLeft,top:document.scrollingElement.scrollTop},v=this._container?this._container.getBoundingClientRect():i,m=s.y+s.height+v.height>window.innerHeight+y.top?s.y-v.height+y.top-2:s.y+s.height+y.top+2,v=s.x+v.width>window.innerWidth+y.left?s.x+s.width-+y.left+v.width:s.x+y.left,y=s.y+s.height+i.height>f.y+f.height+p.top?s.y-c.y-i.height+(h?p.top:0)-2:s.y-c.y+s.height+(h?p.top:0)+2,f=s.x+i.width>f.x+f.width+p.left?s.x-c.x+s.width-i.width+(h?p.left:0):s.x-c.x+(h?p.left:0),this._pos)?this._pos({x:v,y:m,vx:v,vy:m,ix:f,iy:y}):(d=(o="out-place"===this._mode?(d=(o=[v,m])[0],r=o[1],o):[f,y])[0],r=o[1],e.style.transform="translate("+d+"px, "+r+"px)",(o=e.style).top=0,o.left=0,o)}function g(t){return"visible"!==u[t]}},update:function(t){n=[(t=t||this.cur).year(),t.month()];var o,e,d,r,l,a,h,u,n,s,c=n[1];if(t=dayjs(new Date(t.year(),t.month(),1)),o=t.subtract(t.day(),"day"),t=(n=[t.year(),t.month(),t.date()])[0],e=n[1],n=[this.today.year(),this.today.month(),this.today.date()],d=n[0],r=n[1],l=n[2],n=this.sel?[this.sel.year(),this.sel.month(),this.sel.date()]:[null,null,null],a=n[0],h=n[1],u=n[2],this.n.sel.month.value=this.months[e],this.n.sel.year.value=t,this.n.sel.minute.value=this.sel.minute(),this.n.sel.hour.value=this.sel.hour(),this.n.dc.map(function(t,e){var e=o.add(e,"day"),n=[e.year(),e.month(),e.date()],s=n[0],i=n[1],n=n[2];return t.date={year:s,month:i,date:n},t.innerText=e.date(),t.classList.toggle("dim",e.month()!==c),t.classList.toggle("today",d===s&&r===i&&l===n),t.classList.toggle("selected",a===s&&h===i&&u===n)}),this.host&&(n=this.host.value,s=this.value(),n!==(this.host.value=s)))return this.fire("change",s)},value:function(t){return arguments.length?((t=dayjs(t)).isValid()||(t=this._last||dayjs()),this._last=this.cur,this.sel=this.cur=t,this.update()):this._enabled.time?dayjs(new Date(this.sel.year(),this.sel.month(),this.sel.date(),this.sel.hour(),this.sel.minute())).format("YYYY-MM-DDTHH:mm:ssZ"):dayjs(new Date(this.sel.year(),this.sel.month(),this.sel.date())).format("YYYY-MM-DD")}}),"undefined"!=typeof module&&null!==module?module.exports=t:"undefined"!=typeof window&&null!==window&&(window.lddatetimepicker=t)}.call(this);
|
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"name":"lddatetimepicker","version":"0.0.
|
|
1
|
+
{"name":"lddatetimepicker","version":"0.0.8","description":"vanilla date/time picker","browser":"index.min.js","main":"index.js","scripts":{"start":"npx server -r web -o true"},"homepage":"https://github.com/loadingio/lddatetimepicker","repository":{"type":"git","url":"https://github.com/loadingio/lddatetimepicker"},"keywords":["date","time","datetime","datepicker","datetimepicker"],"author":"zbryikt","license":"MIT","devDependencies":{"@loadingio/bootstrap.ext":"^0.0.6","@loadingio/debounce.js":"^1.0.1","@zbryikt/template":"^2.3.34","bootstrap":"^4.6.1","dayjs":"^1.11.0","fedep":"^1.1.7","ldcover":"^3.0.1","ldview":"^1.1.1","livescript":"^1.6.0","proxise":"^1.0.1","stylus":"^0.57.0","uglify-js":"^3.15.3","uglifycss":"^0.0.29"},"frontendDependencies":{"root":"web/static/assets/lib","modules":["@loadingio/bootstrap.ext","@loadingio/debounce.js","@loadingio/ldquery","dayjs","bootstrap","ldcover","ldview","proxise"]},"dependencies":{"@loadingio/ldquery":"^3.0.3"}}
|