lddatetimepicker 0.0.4 → 0.0.7

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 CHANGED
@@ -1,5 +1,20 @@
1
1
  # Change Logs
2
2
 
3
+ ## v0.0.7
4
+
5
+ - support `fixed` option for fixed mode. fixed mode is automatically enabled if no host provided.
6
+
7
+
8
+ ## v0.0.6
9
+
10
+ - even if `count-scroll = false` we should still consider scroll position to keep picker in viewport as possible.
11
+
12
+
13
+ ## v0.0.5
14
+
15
+ - support `change` event when value changed.
16
+
17
+
3
18
  ## v0.0.4
4
19
 
5
20
  - update widget based on initial value of host if available
package/README.md CHANGED
@@ -29,6 +29,9 @@ 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`: default false. true to enabled fixed mode, which:
33
+ - when toggled, the datetime widget pops up in screen center, and covers the whole screen.
34
+ - will be forced to true if `host` is not provided.
32
35
 
33
36
 
34
37
  ## API
package/index.css CHANGED
@@ -27,20 +27,42 @@
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
- }
38
- .lddtp div {
39
- user-select: none;
40
43
  }
41
44
  .lddtp.active {
42
45
  display: block;
43
46
  }
47
+ .lddtp.active.fixed {
48
+ position: fixed;
49
+ top: 0;
50
+ left: 0;
51
+ right: 0;
52
+ bottom: 0;
53
+ width: auto;
54
+ z-index: 2000;
55
+ border: 0;
56
+ box-shadow: none;
57
+ border-radius: 0;
58
+ background: rgba(0,0,0,0.75);
59
+ }
60
+ .lddtp.active.fixed > div {
61
+ position: absolute;
62
+ top: 50%;
63
+ left: 50%;
64
+ transform: translate(-50%, -50%);
65
+ }
44
66
  .lddtp-ds {
45
67
  height: 250px;
46
68
  display: grid;
package/index.js CHANGED
@@ -1,6 +1,6 @@
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
5
  var div, r, ref$, x$, _handler, e, this$ = this;
6
6
  opt == null && (opt = {});
@@ -8,6 +8,7 @@
8
8
  this._enabled = {
9
9
  time: !(opt.time != null) || opt.time
10
10
  };
11
+ this._fixed = opt.fixed;
11
12
  this.evthdr = {};
12
13
  this.hdr = {
13
14
  mouseup: function(evt){
@@ -51,15 +52,18 @@
51
52
  this.host = typeof opt.host === 'string'
52
53
  ? document.querySelector(opt.host)
53
54
  : opt.host;
54
- this.host.parentNode.insertBefore(div, opt.host.nextSibling);
55
55
  this.host.addEventListener('mouseup', function(evt){
56
56
  return this$.toggle();
57
57
  });
58
- } else {
59
- document.body.appendChild(div);
60
58
  }
61
59
  div.innerHTML = html;
62
60
  this.root = r = div.querySelector('.lddtp');
61
+ if (this._fixed || !this.host) {
62
+ document.body.appendChild(div);
63
+ this.root.classList.toggle('fixed');
64
+ } else if (this.host) {
65
+ this.host.parentNode.insertBefore(div, opt.host.nextSibling);
66
+ }
63
67
  this.root.addEventListener('mouseup', function(evt){
64
68
  return evt.stopPropagation();
65
69
  });
@@ -102,6 +106,9 @@
102
106
  }).join('');
103
107
  this.root.addEventListener('click', function(evt){
104
108
  var n;
109
+ if (this$._fixed && evt.target.classList.contains('fixed')) {
110
+ return this$.toggle(false);
111
+ }
105
112
  n = evt.target;
106
113
  if (n.classList.contains('lddtp-d')) {
107
114
  this$.sel = dayjs(new Date(n.date.year, n.date.month, n.date.date, this$.sel.hour(), this$.sel.minute()));
@@ -198,6 +205,9 @@
198
205
  document.addEventListener('keydown', this.hdr.keydown);
199
206
  }
200
207
  this.root.classList.toggle('active', true);
208
+ if (this._fixed) {
209
+ return;
210
+ }
201
211
  c = this.root;
202
212
  h = this.host;
203
213
  n = h.parentNode;
@@ -208,7 +218,12 @@
208
218
  countScroll = true;
209
219
  while (n && n.getAttribute) {
210
220
  s = getComputedStyle(n);
211
- if (n.nodeName === 'BODY' || ['overflow', 'overflow-y', 'overflow-x'].filter(fn$).length) {
221
+ if (n.nodeName === 'BODY') {
222
+ if (!nscroll) {
223
+ nscroll = document.scrollingElement;
224
+ }
225
+ }
226
+ if (['overflow', 'overflow-y', 'overflow-x'].filter(fn$).length) {
212
227
  if (!nscroll) {
213
228
  nscroll = n;
214
229
  }
@@ -228,24 +243,19 @@
228
243
  }
229
244
  stackb = nstack.getBoundingClientRect();
230
245
  scrollb = nscroll.getBoundingClientRect();
231
- scroll = countScroll
232
- ? {
233
- left: nscroll.scrollLeft,
234
- top: nscroll.scrollTop
235
- }
236
- : {
237
- left: 0,
238
- top: 0
239
- };
240
- if (hb.y + hb.height + cb.height > scrollb.y + scrollb.height) {
241
- y = hb.y - stackb.y - cb.height + scroll.top - 2;
246
+ scroll = {
247
+ left: nscroll.scrollLeft,
248
+ top: nscroll.scrollTop
249
+ };
250
+ if (hb.y + hb.height + cb.height > scrollb.y + scrollb.height + scroll.top) {
251
+ y = hb.y - stackb.y - cb.height + (countScroll ? scroll.top : 0) - 2;
242
252
  } else {
243
- y = hb.y - stackb.y + hb.height + scroll.top + 2;
253
+ y = hb.y - stackb.y + hb.height + (countScroll ? scroll.top : 0) + 2;
244
254
  }
245
- if (hb.x + cb.width > scrollb.x + scrollb.width) {
246
- x = hb.x - stackb.x + hb.width - cb.width + scroll.left;
255
+ if (hb.x + cb.width > scrollb.x + scrollb.width + scroll.left) {
256
+ x = hb.x - stackb.x + hb.width - cb.width + (countScroll ? scroll.left : 0);
247
257
  } else {
248
- x = hb.x - stackb.x + scroll.left;
258
+ x = hb.x - stackb.x + (countScroll ? scroll.left : 0);
249
259
  }
250
260
  c.style.transform = "translate(" + x + "px, " + y + "px)";
251
261
  return ref$ = c.style, ref$.top = 0, ref$.left = 0, ref$;
@@ -254,7 +264,7 @@
254
264
  }
255
265
  },
256
266
  update: function(now){
257
- var ref$, y, m, start, ny, nm, nd, ty, tm, td, sy, sm, sd;
267
+ var ref$, y, m, start, ny, nm, nd, ty, tm, td, sy, sm, sd, ov, nv;
258
268
  now = now || this.cur;
259
269
  ref$ = [now.year(), now.month()], y = ref$[0], m = ref$[1];
260
270
  now = dayjs(new Date(now.year(), now.month(), 1));
@@ -283,7 +293,12 @@
283
293
  return n.classList.toggle('selected', sy === dy && sm === dm && sd === dd);
284
294
  });
285
295
  if (this.host) {
286
- return this.host.value = this.value();
296
+ ov = this.host.value;
297
+ nv = this.value();
298
+ this.host.value = nv;
299
+ if (ov !== nv) {
300
+ return this.fire('change', nv);
301
+ }
287
302
  }
288
303
  },
289
304
  value: function(v){
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;display:none}.lddtp div{user-select:none}.lddtp.active{display:block}.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}
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.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!==s.host)return s.root.classList.toggle("active",!1),document.removeEventListener("mouseup",s.hdr.mouseup),document.removeEventListener("keydown",s.hdr.keydown)},keydown:function(t){var e;if(s.isOn()&&(13===(e=t.keyCode)||27===e||37===e||38===e||39===e||40===e)&&s.sel)return 13===e||27===e?s.toggle(!1):(t.stopPropagation(),t.preventDefault(),s.sel=37===e?s.sel.subtract(1,"day"):39===e?s.sel.add(1,"day"):38===e?s.sel.subtract(7,"day"):40===e?s.sel.add(7,"day"):void 0,s.cur=s.sel,s.update())}},e=document.createElement("div"),t.host?(this.host="string"==typeof t.host?document.querySelector(t.host):t.host,this.host.parentNode.insertBefore(e,t.host.nextSibling),this.host.addEventListener("mouseup",function(t){return s.toggle()})):document.body.appendChild(e),e.innerHTML='<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>',this.root=t=e.querySelector(".lddtp"),this.root.addEventListener("mouseup",function(t){return t.stopPropagation()}),this.n={ds:t.querySelector(".lddtp-ds"),t:t.querySelector(".lddtp-t"),sel:{year:t.querySelector(".lddtp-year-sel"),month:t.querySelector(".lddtp-month-sel"),hour:t.querySelector(".lddtp-hour-sel"),minute:t.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">'+s.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(t.querySelectorAll(".lddtp-w")),e.dc=Array.from(t.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){t=t.target;return t.classList.contains("lddtp-d")?(s.sel=dayjs(new Date(t.date.year,t.date.month,t.date.date,s.sel.hour(),s.sel.minute())),s.update(s.cur)):"-"===t.getAttribute("data-action")?(s.cur=s.cur.subtract(1,"month"),s.update(s.cur)):"+"===t.getAttribute("data-action")?(s.cur=s.cur.add(1,"month"),s.update(s.cur)):void 0}),this.n.sel.minute.addEventListener("change",function(t){return s.sel=s.sel.minute(t.target.value),s.update()}),this.n.sel.hour.addEventListener("change",function(t){return s.sel=s.sel.hour(t.target.value),s.update()}),this.n.sel.year.addEventListener("change",function(t){return s.cur=dayjs(new Date(s.n.sel.year.value,s.months.indexOf(s.n.sel.month.value),1)),s.update(s.cur)}),this.n.sel.month.addEventListener("change",function(t){return s.cur=dayjs(new Date(s.n.sel.year.value,s.months.indexOf(s.n.sel.month.value),1)),s.update(s.cur)}),this.host&&(e=debounce(function(){var t;try{return t=dayjs(s.host.value).format("YYYY-MM-DDTHH:mm:ssZ"),s.host.value=t,s.value(s.host.value)}catch(t){return t}}),this.host.addEventListener("change",e),this.host.addEventListener("input",e)),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 s,n={}.hasOwnProperty;for(s in e)n.call(e,s)&&(t[s]=e[s]);return t}(Object.create(Object.prototype),{on:function(t,s){var n=this;return(Array.isArray(t)?t:[t]).map(function(t){var e;return((e=n.evthdr)[t]||(e[t]=[])).push(s)})},fire:function(t){for(var e,s,n,i,o=[],d=[],r=1,a=arguments.length;r<a;++r)d.push(arguments[r]);for(e=d,r=0,n=(s=this.evthdr[t]||[]).length;r<n;++r)i=s[r],o.push(i.apply(this,e));return o},isOn:function(){return this.root.classList.contains("active")},toggle:function(t){var e,s,n,i,o,d,r,a,l,u,h,c,p,v;if(!(t=0===arguments.length?!this.root.classList.contains("active"):t))return this.root.classList.toggle("active",!1),document.removeEventListener("mouseup",this.hdr.mouseup),void document.removeEventListener("keydown",this.hdr.keydown);for(this.isOn()||(document.addEventListener("mouseup",this.hdr.mouseup),document.addEventListener("keydown",this.hdr.keydown)),this.root.classList.toggle("active",!0),e=this.root,s=(n=this.host).parentNode,n=n.getBoundingClientRect(),i=e.getBoundingClientRect(),d=(o=[0,0])[0],r=o[1],a=(o=[null,null])[0],l=o[1],u=!0;s&&s.getAttribute&&(h=getComputedStyle(s),"BODY"!==s.nodeName&&!["overflow","overflow-y","overflow-x"].filter(m).length||(a=a||s),"BODY"!==s.nodeName&&"static"===h.position||l||(l=s,a||(u=!1)),!a||!l);)s=s.parentNode;return c=l.getBoundingClientRect(),p=a.getBoundingClientRect(),v=u?{left:a.scrollLeft,top:a.scrollTop}:{left:0,top:0},r=n.y+n.height+i.height>p.y+p.height?n.y-c.y-i.height+v.top-2:n.y-c.y+n.height+v.top+2,d=n.x+i.width>p.x+p.width?n.x-c.x+n.width-i.width+v.left:n.x-c.x+v.left,e.style.transform="translate("+d+"px, "+r+"px)",(o=e.style).top=0,o.left=0,o;function m(t){return"visible"!==h[t]}},update:function(t){e=[(t=t||this.cur).year(),t.month()];var e,o,s,d,r,a,l,u,h,c=e[1];if(t=dayjs(new Date(t.year(),t.month(),1)),o=t.subtract(t.day(),"day"),t=(e=[t.year(),t.month(),t.date()])[0],s=e[1],e=[this.today.year(),this.today.month(),this.today.date()],d=e[0],r=e[1],a=e[2],e=this.sel?[this.sel.year(),this.sel.month(),this.sel.date()]:[null,null,null],l=e[0],u=e[1],h=e[2],this.n.sel.month.value=this.months[s],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"),s=[e.year(),e.month(),e.date()],n=s[0],i=s[1],s=s[2];return t.date={year:n,month:i,date:s},t.innerText=e.date(),t.classList.toggle("dim",e.month()!==c),t.classList.toggle("today",d===n&&r===i&&a===s),t.classList.toggle("selected",l===n&&u===i&&h===s)}),this.host)return this.host.value=this.value()},value:function(t){return arguments.length?(this.sel=dayjs(t),this.cur=dayjs(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);
1
+ !function(){var t;(t=function(t){var e,s,n=this;if(this.opt=t=null==t?{}:t,this._enabled={time:!(null!=t.time)||t.time},this._fixed=t.fixed,this.evthdr={},this.hdr={mouseup:function(t){if(t.target!==n.host)return n.root.classList.toggle("active",!1),document.removeEventListener("mouseup",n.hdr.mouseup),document.removeEventListener("keydown",n.hdr.keydown)},keydown:function(t){var e;if(n.isOn()&&(13===(e=t.keyCode)||27===e||37===e||38===e||39===e||40===e)&&n.sel)return 13===e||27===e?n.toggle(!1):(t.stopPropagation(),t.preventDefault(),n.sel=37===e?n.sel.subtract(1,"day"):39===e?n.sel.add(1,"day"):38===e?n.sel.subtract(7,"day"):40===e?n.sel.add(7,"day"):void 0,n.cur=n.sel,n.update())}},e=document.createElement("div"),t.host&&(this.host="string"==typeof t.host?document.querySelector(t.host):t.host,this.host.addEventListener("mouseup",function(t){return n.toggle()})),e.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=s=e.querySelector(".lddtp"),this._fixed||!this.host?(document.body.appendChild(e),this.root.classList.toggle("fixed")):this.host&&this.host.parentNode.insertBefore(e,t.host.nextSibling),this.root.addEventListener("mouseup",function(t){return t.stopPropagation()}),this.n={ds:s.querySelector(".lddtp-ds"),t:s.querySelector(".lddtp-t"),sel:{year:s.querySelector(".lddtp-year-sel"),month:s.querySelector(".lddtp-month-sel"),hour:s.querySelector(".lddtp-hour-sel"),minute:s.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">'+n.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(s.querySelectorAll(".lddtp-w")),e.dc=Array.from(s.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 n._fixed&&t.target.classList.contains("fixed")?n.toggle(!1):(t=t.target).classList.contains("lddtp-d")?(n.sel=dayjs(new Date(t.date.year,t.date.month,t.date.date,n.sel.hour(),n.sel.minute())),n.update(n.cur)):"-"===t.getAttribute("data-action")?(n.cur=n.cur.subtract(1,"month"),n.update(n.cur)):"+"===t.getAttribute("data-action")?(n.cur=n.cur.add(1,"month"),n.update(n.cur)):void 0}),this.n.sel.minute.addEventListener("change",function(t){return n.sel=n.sel.minute(t.target.value),n.update()}),this.n.sel.hour.addEventListener("change",function(t){return n.sel=n.sel.hour(t.target.value),n.update()}),this.n.sel.year.addEventListener("change",function(t){return n.cur=dayjs(new Date(n.n.sel.year.value,n.months.indexOf(n.n.sel.month.value),1)),n.update(n.cur)}),this.n.sel.month.addEventListener("change",function(t){return n.cur=dayjs(new Date(n.n.sel.year.value,n.months.indexOf(n.n.sel.month.value),1)),n.update(n.cur)}),this.host&&(s=debounce(function(){var t;try{return t=dayjs(n.host.value).format("YYYY-MM-DDTHH:mm:ssZ"),n.host.value=t,n.value(n.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 s,n={}.hasOwnProperty;for(s in e)n.call(e,s)&&(t[s]=e[s]);return t}(Object.create(Object.prototype),{on:function(t,s){var n=this;return(Array.isArray(t)?t:[t]).map(function(t){var e;return((e=n.evthdr)[t]||(e[t]=[])).push(s)})},fire:function(t){for(var e,s,n,i,o=[],d=[],r=1,a=arguments.length;r<a;++r)d.push(arguments[r]);for(e=d,r=0,n=(s=this.evthdr[t]||[]).length;r<n;++r)i=s[r],o.push(i.apply(this,e));return o},isOn:function(){return this.root.classList.contains("active")},toggle:function(t){var e,s,n,i,o,d,r,a,l,u,h,c,p,v;if(!(t=0===arguments.length?!this.root.classList.contains("active"):t))return this.root.classList.toggle("active",!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.root.classList.toggle("active",!0),!this._fixed){for(e=this.root,s=(n=this.host).parentNode,n=n.getBoundingClientRect(),i=e.getBoundingClientRect(),d=(o=[0,0])[0],r=o[1],a=(o=[null,null])[0],l=o[1],u=!0;s&&s.getAttribute&&(h=getComputedStyle(s),"BODY"===s.nodeName&&(a=a||document.scrollingElement),["overflow","overflow-y","overflow-x"].filter(m).length&&(a=a||s),"BODY"!==s.nodeName&&"static"===h.position||l||(l=s,a||(u=!1)),!a||!l);)s=s.parentNode;return c=l.getBoundingClientRect(),p=a.getBoundingClientRect(),v={left:a.scrollLeft,top:a.scrollTop},r=n.y+n.height+i.height>p.y+p.height+v.top?n.y-c.y-i.height+(u?v.top:0)-2:n.y-c.y+n.height+(u?v.top:0)+2,d=n.x+i.width>p.x+p.width+v.left?n.x-c.x+n.width-i.width+(u?v.left:0):n.x-c.x+(u?v.left:0),e.style.transform="translate("+d+"px, "+r+"px)",(o=e.style).top=0,o.left=0,o}function m(t){return"visible"!==h[t]}},update:function(t){s=[(t=t||this.cur).year(),t.month()];var o,e,d,r,a,l,u,h,s,n,c=s[1];if(t=dayjs(new Date(t.year(),t.month(),1)),o=t.subtract(t.day(),"day"),t=(s=[t.year(),t.month(),t.date()])[0],e=s[1],s=[this.today.year(),this.today.month(),this.today.date()],d=s[0],r=s[1],a=s[2],s=this.sel?[this.sel.year(),this.sel.month(),this.sel.date()]:[null,null,null],l=s[0],u=s[1],h=s[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"),s=[e.year(),e.month(),e.date()],n=s[0],i=s[1],s=s[2];return t.date={year:n,month:i,date:s},t.innerText=e.date(),t.classList.toggle("dim",e.month()!==c),t.classList.toggle("today",d===n&&r===i&&a===s),t.classList.toggle("selected",l===n&&u===i&&h===s)}),this.host&&(s=this.host.value,n=this.value(),s!==(this.host.value=n)))return this.fire("change",n)},value:function(t){return arguments.length?(this.sel=dayjs(t),this.cur=dayjs(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.4","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"}}
1
+ {"name":"lddatetimepicker","version":"0.0.7","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"}}