lddatetimepicker 0.0.14 → 0.0.16

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Change Logs
 
+## v0.0.16
+
+ - new `viewMode` option ( default off, also togglable via `config`. requires `host` ):
+   renders a prettified read-only overlay on top of the host input, e.g. `2011/01/01 13:05 UTC+8`,
+   with the utc offset in smaller, dimmed text. the host input keeps its raw ISO value, and the
+   overlay steps aside while host is focused so the value stays editable by typing.
+
+
+## v0.0.15
+
+ - upgrade dependencies
+ - remove `@loadingio/ldquery` from `dependencies`. it is never referenced by the published code
+   ( which only uses `dayjs`, `debounce` and `zmgr` ), so it is no longer installed by consumers.
+
+
 ## v0.0.14
 
  - fix: `change` is now fired based on the picked value instead of on the host input string.

package/README.md

@@ -29,6 +29,11 @@ Constructor options:
 
  - `host`: host element ( should be an input element, if provided )
  - `time`: default true. hide and disable time picker if false.
+ - `viewMode`: default false. if true, a prettified, read-only overlay is rendered right on top of
+   the host input, showing the picked value as `2011/01/01 13:05 UTC+8` ( date only if `time` is
+   false ). the host input still carries the raw ISO value, so form submission is unaffected. the
+   overlay steps aside whenever host is focused, so the raw value stays editable by typing, and
+   comes back on blur. requires `host`.
  - `suppress`: default false. suppress popup when clicking host if true.
  - `fixed`: (deprecated) default false. true to enabled fixed mode.
  - `mode`: either `in-place`, `out-place` or `fixed`.
@@ -63,7 +68,8 @@ Constructor options:
    - following options are supported:
      - `suppress`: see constructor option for this option.
      - `time`: see constructor option for `time`
-   - return current config ( `suppress` and `time` ) when calling without option.
+     - `viewMode`: see constructor option for `viewMode`
+   - return current config ( `suppress`, `viewMode` and `time` ) when calling without option.
 
 
 ## License

package/index.css

@@ -143,3 +143,20 @@
   content: "OK";
   display: block;
 }
+.lddtp-v {
+  position: absolute;
+  box-sizing: border-box;
+  display: none;
+  align-items: center;
+  overflow: hidden;
+  white-space: nowrap;
+  pointer-events: none;
+}
+.lddtp-v .lddtp-v-t {
+  margin-left: 0.4em;
+}
+.lddtp-v .lddtp-v-z {
+  margin-left: 0.4em;
+  font-size: 0.75em;
+  opacity: 0.6;
+}

package/index.js

@@ -1,6 +1,15 @@
 (function(){
-  var html, lddatetimepicker;
+  var html, formatTz, lddatetimepicker;
   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 class="lddtp-c"></div>\n</div></div>';
+  formatTz = function(d){
+    var z, ref$, sign, hh, mm;
+    z = d.format('Z');
+    ref$ = [z[0], +z.substring(1, 3), +z.substring(4, 6)], sign = ref$[0], hh = ref$[1], mm = ref$[2];
+    if (!hh && !mm) {
+      return 'UTC';
+    }
+    return "UTC" + sign + hh + (mm ? ":" + ('' + mm).padStart(2, '0') : '');
+  };
   lddatetimepicker = function(opt){
     var ref$, _c, div, r, x$, _handler, e, this$ = this;
     opt == null && (opt = {});
@@ -9,6 +18,7 @@
     this._enabled = {
       time: !(opt.time != null) || opt.time
     };
+    this._viewMode = !!opt.viewMode;
     this._zmgr = opt.zmgr || null;
     this._mode = (ref$ = opt.mode) === 'in-place' || ref$ === 'out-place' || ref$ === 'fixed'
       ? opt.mode
@@ -172,6 +182,14 @@
       });
       this.host.addEventListener('change', _handler);
       this.host.addEventListener('input', _handler);
+      this.host.addEventListener('focus', function(){
+        this$._focused = true;
+        return this$._renderView();
+      });
+      this.host.addEventListener('blur', function(){
+        this$._focused = false;
+        return this$._renderView();
+      });
     }
     if (this.host && this.host.value) {
       try {
@@ -367,6 +385,7 @@
       if (this.host) {
         this.host.value = nv;
       }
+      this._renderView();
       if (nv !== this._value) {
         this._value = nv;
         return this.fire('change', nv);
@@ -394,6 +413,7 @@
       if (cfg == null) {
         return {
           suppress: !!this._suppress,
+          viewMode: !!this._viewMode,
           time: {
             enabled: !!this._enabled.time
           }
@@ -402,13 +422,93 @@
       if (cfg.suppress != null) {
         this._suppress = cfg.suppress;
       }
+      if (cfg.viewMode != null) {
+        this._viewMode = !!cfg.viewMode;
+      }
       if (cfg.time != null) {
         this._enabled.time = cfg.time;
+      }
+      if (cfg.time != null || cfg.viewMode != null) {
         return this.render();
       }
     },
     render: function(){
-      return this.n.t.style.display = this._enabled.time ? '' : 'none';
+      this.n.t.style.display = this._enabled.time ? '' : 'none';
+      return this._renderView();
+    },
+    _viewNode: function(){
+      var p, n, this$ = this;
+      if (this._vnode || !this.host) {
+        return this._vnode;
+      }
+      p = this.host.offsetParent;
+      if (!p) {
+        return null;
+      }
+      this._vnode = n = document.createElement('div');
+      n.className = 'lddtp-v';
+      p.appendChild(n);
+      this._vsync = function(){
+        return this$._syncView();
+      };
+      window.addEventListener('resize', this._vsync);
+      return n;
+    },
+    _syncView: function(){
+      var ref$, n, h, s;
+      if (!(this._vnode && this.host)) {
+        return;
+      }
+      ref$ = [this._vnode, this.host], n = ref$[0], h = ref$[1];
+      s = getComputedStyle(h);
+      return import$(n.style, {
+        left: h.offsetLeft + "px",
+        top: h.offsetTop + "px",
+        width: h.offsetWidth + "px",
+        height: h.offsetHeight + "px",
+        padding: s.paddingTop + " " + s.paddingRight + " " + s.paddingBottom + " " + s.paddingLeft,
+        borderWidth: s.borderTopWidth + " " + s.borderRightWidth + " " + s.borderBottomWidth + " " + s.borderLeftWidth,
+        borderStyle: s.borderTopStyle + " " + s.borderRightStyle + " " + s.borderBottomStyle + " " + s.borderLeftStyle,
+        borderColor: s.borderTopColor + " " + s.borderRightColor + " " + s.borderBottomColor + " " + s.borderLeftColor,
+        borderRadius: s.borderRadius,
+        background: s.backgroundColor,
+        color: this._textColor,
+        fontFamily: s.fontFamily,
+        fontSize: s.fontSize,
+        fontWeight: s.fontWeight,
+        textAlign: s.textAlign
+      });
+    },
+    _hideView: function(){
+      if (this._vnode) {
+        this._vnode.style.display = 'none';
+      }
+      if (this._hostColor != null) {
+        this.host.style.color = this._hostColor;
+        return this._hostColor = null;
+      }
+    },
+    _renderView: function(){
+      var n, d;
+      if (!this.host) {
+        return;
+      }
+      if (!this._viewMode || this._focused) {
+        return this._hideView();
+      }
+      n = this._viewNode();
+      if (!n) {
+        return;
+      }
+      if (this._hostColor == null) {
+        this._textColor = getComputedStyle(this.host).color;
+        this._hostColor = this.host.style.color || '';
+        this.host.style.color = 'transparent';
+      }
+      d = this.sel;
+      n.innerHTML = ("<span class=\"lddtp-v-d\">" + d.format('YYYY/MM/DD') + "</span>") + (this._enabled.time ? ("<span class=\"lddtp-v-t\">" + d.format('HH:mm') + "</span>") + ("<span class=\"lddtp-v-z\">" + formatTz(d) + "</span>") : '');
+      n.style.display = 'flex';
+      return this._syncView();
     }
   });
   if (typeof module != 'undefined' && module !== null) {

package/index.min.css

@@ -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;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}.lddtp-c{text-align:center;padding:.5em;font-weight:bold;font-size:.75em;background:#f7f8f9;border-radius:.25em}.lddtp-c:before{content:"OK";display:block}
+.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}.lddtp-c{text-align:center;padding:.5em;font-weight:bold;font-size:.75em;background:#f7f8f9;border-radius:.25em}.lddtp-c:before{content:"OK";display:block}.lddtp-v{position:absolute;box-sizing:border-box;display:none;align-items:center;overflow:hidden;white-space:nowrap;pointer-events:none}.lddtp-v .lddtp-v-t{margin-left:.4em}.lddtp-v .lddtp-v-z{margin-left:.4em;font-size:.75em;opacity:.6}

package/index.min.js

@@ -1 +1 @@
-!function(){var t;(t=function(t){var e,s,i,n=this;if(this.opt=t=null==t?{}:t,this._suppress=t.suppress,this._enabled={time:!(null!=t.time)||t.time},this._zmgr=t.zmgr||null,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={},this._value=null,i=t.container){if(!("object"==typeof i&&i.isOn&&i.toggle&&i.node))throw new Error("[lddatetimepicker] `isOn`, `toggle` and `node` are all required within `container` option.");this._toggle=i.toggle,this.isOn=i.isOn,this._container=i.node,this._pos=i.position}if(this.hdr={mouseup:function(t){if(t.target!==n.host)return n._toggle(!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())}},i=document.createElement("div"),t.host&&(this.host="string"==typeof t.host?document.querySelector(t.host):t.host,this.host.addEventListener("mouseup",function(t){if(!n._suppress)return n.toggle()})),i.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 class="lddtp-c"></div>\n</div></div>',this.root=s=i.querySelector(".lddtp"),this._container?(this._container.appendChild(i),this.root.classList.add("static","bare")):"out-place"===this._mode?document.body.appendChild(i):"fixed"!==this._mode&&this.host?this.host&&this.host.parentNode.insertBefore(i,t.host.nextSibling):(document.body.appendChild(i),this.root.classList.toggle("fixed")),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.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"fixed"===n._mode&&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)):t.classList.contains("lddtp-c")?n.toggle(!1):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&&(i=debounce(function(){try{return n.value(n.host.value)}catch(t){return t}}),this.host.addEventListener("change",i),this.host.addEventListener("input",i)),this.host&&this.host.value)try{this.host.value=this._value=dayjs(this.host.value).format("YYYY-MM-DDTHH:mm:ssZ"),this.value(this.host.value)}catch(t){0}else this._value=this.value(),this.update();return this}).prototype=((t,e)=>{var s,i={}.hasOwnProperty;for(s in e)i.call(e,s)&&(t[s]=e[s]);return t})(Object.create(Object.prototype),{on:function(t,s){var i=this;return(Array.isArray(t)?t:[t]).map(function(t){var e;return((e=i.evthdr)[t]||(e[t]=[])).push(s)})},fire:function(t){for(var e,s,i,n,o=[],d=[],l=1,r=arguments.length;l<r;++l)d.push(arguments[l]);for(e=d,l=0,i=(s=this.evthdr[t]||[]).length;l<i;++l)n=s[l],o.push(n.apply(this,e));return o},isOn:function(){return this.root.classList.contains("active")},_toggle:function(t){t=t||!(null!=t)&&!this.isOn();return this._zmgr&&(t?this.root.style.zIndex=this._zmgr.add():this._zmgr.remove(this.root.style.zIndex)),this.root.classList.toggle("active",t)},toggle:function(t){var e,s,i,n,o,d,l,r,a,h,u,c,p,m,v;if(t=0===arguments.length?!this.isOn():t){if(this.isOn()||(document.addEventListener("mouseup",this.hdr.mouseup),document.addEventListener("keydown",this.hdr.keydown)),this._toggle(!0),"fixed"!==this._mode){for(t=this.root,e=(s=this.host).parentNode,s=s.getBoundingClientRect(),i=t.getBoundingClientRect(),o=(n=[0,0])[0],d=(n=[null,null])[0],l=n[1],r=!0;e&&e.getAttribute&&(a=getComputedStyle(e),"BODY"===e.nodeName&&(d=d||document.scrollingElement),["overflow","overflow-y","overflow-x"].filter(y).length&&(d=d||e),"BODY"!==e.nodeName&&"static"===a.position||l||(l=e,d)||(r=!1),!d||!l);)e=e.parentNode;return(h=l.getBoundingClientRect(),v=d.getBoundingClientRect(),u={left:d.scrollLeft,top:d.scrollTop},m="fixed"===this._mode?{left:0,top:0}:{left:document.scrollingElement.scrollLeft,top:document.scrollingElement.scrollTop},p=this._container?this._container.getBoundingClientRect():i,c=s.y+s.height+p.height>window.innerHeight+m.top?s.y-p.height+m.top-2:s.y+s.height+m.top+2,p=s.x+p.width>window.innerWidth+m.left?s.x+s.width-+m.left+p.width:s.x+m.left,m=s.y+s.height+i.height>v.y+v.height+u.top?s.y-h.y-i.height+(r?u.top:0)-2:s.y-h.y+s.height+(r?u.top:0)+2,v=s.x+i.width>v.x+v.width+u.left?s.x-h.x+s.width-i.width+(r?u.left:0):s.x-h.x+(r?u.left:0),this._pos)?this._pos({x:p,y:c,vx:p,vy:c,ix:v,iy:m}):(o=(n="out-place"===this._mode?(o=(n=[p,c])[0],n[1],n):[v,m])[0],t.style.transform="translate("+o+"px, "+n[1]+"px)",(n=t.style).top=0,n.left=0,this.render())}}else this._toggle(!1),document.removeEventListener("mouseup",this.hdr.mouseup),document.removeEventListener("keydown",this.hdr.keydown);function y(t){return"visible"!==a[t]}},update:function(t){s=[(t=t||this.cur).year(),t.month()];var o,e,d,l,r,a,h,u,s,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],l=s[1],r=s[2],s=this.sel?[this.sel.year(),this.sel.month(),this.sel.date()]:[null,null,null],a=s[0],h=s[1],u=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()],i=s[0],n=s[1],s=s[2];return t.date={year:i,month:n,date:s},t.innerText=e.date(),t.classList.toggle("dim",e.month()!==c),t.classList.toggle("today",d===i&&l===n&&r===s),t.classList.toggle("selected",a===i&&h===n&&u===s)}),s=this.value(),this.host&&(this.host.value=s),s!==this._value)return this._value=s,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")},config:function(t){return null==t?{suppress:!!this._suppress,time:{enabled:!!this._enabled.time}}:(null!=t.suppress&&(this._suppress=t.suppress),null!=t.time?(this._enabled.time=t.time,this.render()):void 0)},render:function(){return this.n.t.style.display=this._enabled.time?"":"none"}}),"undefined"!=typeof module&&null!==module?module.exports=t:"undefined"!=typeof window&&null!==window&&(window.lddatetimepicker=t)}.call(this);
+!function(){var s,t;function i(t,e){var s,i={}.hasOwnProperty;for(s in e)i.call(e,s)&&(t[s]=e[s]);return t}s=function(t){var t=t.format("Z"),t=[t[0],+t.substring(1,3),+t.substring(4,6)],e=t[1],s=t[2];return e||s?"UTC"+t[0]+e+(s?":"+(""+s).padStart(2,"0"):""):"UTC"},(t=function(t){var e,s,i,n=this;if(this.opt=t=null==t?{}:t,this._suppress=t.suppress,this._enabled={time:!(null!=t.time)||t.time},this._viewMode=!!t.viewMode,this._zmgr=t.zmgr||null,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={},this._value=null,i=t.container){if(!("object"==typeof i&&i.isOn&&i.toggle&&i.node))throw new Error("[lddatetimepicker] `isOn`, `toggle` and `node` are all required within `container` option.");this._toggle=i.toggle,this.isOn=i.isOn,this._container=i.node,this._pos=i.position}if(this.hdr={mouseup:function(t){if(t.target!==n.host)return n._toggle(!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())}},i=document.createElement("div"),t.host&&(this.host="string"==typeof t.host?document.querySelector(t.host):t.host,this.host.addEventListener("mouseup",function(t){if(!n._suppress)return n.toggle()})),i.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 class="lddtp-c"></div>\n</div></div>',this.root=s=i.querySelector(".lddtp"),this._container?(this._container.appendChild(i),this.root.classList.add("static","bare")):"out-place"===this._mode?document.body.appendChild(i):"fixed"!==this._mode&&this.host?this.host&&this.host.parentNode.insertBefore(i,t.host.nextSibling):(document.body.appendChild(i),this.root.classList.toggle("fixed")),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.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"fixed"===n._mode&&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)):t.classList.contains("lddtp-c")?n.toggle(!1):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&&(i=debounce(function(){try{return n.value(n.host.value)}catch(t){return t}}),this.host.addEventListener("change",i),this.host.addEventListener("input",i),this.host.addEventListener("focus",function(){return n._focused=!0,n._renderView()}),this.host.addEventListener("blur",function(){return n._focused=!1,n._renderView()})),this.host&&this.host.value)try{this.host.value=this._value=dayjs(this.host.value).format("YYYY-MM-DDTHH:mm:ssZ"),this.value(this.host.value)}catch(t){0}else this._value=this.value(),this.update();return this}).prototype=i(Object.create(Object.prototype),{on:function(t,s){var i=this;return(Array.isArray(t)?t:[t]).map(function(t){var e;return((e=i.evthdr)[t]||(e[t]=[])).push(s)})},fire:function(t){for(var e,s,i,n,o=[],d=[],r=1,l=arguments.length;r<l;++r)d.push(arguments[r]);for(e=d,r=0,i=(s=this.evthdr[t]||[]).length;r<i;++r)n=s[r],o.push(n.apply(this,e));return o},isOn:function(){return this.root.classList.contains("active")},_toggle:function(t){t=t||!(null!=t)&&!this.isOn();return this._zmgr&&(t?this.root.style.zIndex=this._zmgr.add():this._zmgr.remove(this.root.style.zIndex)),this.root.classList.toggle("active",t)},toggle:function(t){var e,s,i,n,o,d,r,l,h,a,u,c,p,v,m;if(t=0===arguments.length?!this.isOn():t){if(this.isOn()||(document.addEventListener("mouseup",this.hdr.mouseup),document.addEventListener("keydown",this.hdr.keydown)),this._toggle(!0),"fixed"!==this._mode){for(t=this.root,e=(s=this.host).parentNode,s=s.getBoundingClientRect(),i=t.getBoundingClientRect(),o=(n=[0,0])[0],d=(n=[null,null])[0],r=n[1],l=!0;e&&e.getAttribute&&(h=getComputedStyle(e),"BODY"===e.nodeName&&(d=d||document.scrollingElement),["overflow","overflow-y","overflow-x"].filter(f).length&&(d=d||e),"BODY"!==e.nodeName&&"static"===h.position||r||(r=e,d)||(l=!1),!d||!r);)e=e.parentNode;return(a=r.getBoundingClientRect(),m=d.getBoundingClientRect(),u={left:d.scrollLeft,top:d.scrollTop},v="fixed"===this._mode?{left:0,top:0}:{left:document.scrollingElement.scrollLeft,top:document.scrollingElement.scrollTop},p=this._container?this._container.getBoundingClientRect():i,c=s.y+s.height+p.height>window.innerHeight+v.top?s.y-p.height+v.top-2:s.y+s.height+v.top+2,p=s.x+p.width>window.innerWidth+v.left?s.x+s.width-+v.left+p.width:s.x+v.left,v=s.y+s.height+i.height>m.y+m.height+u.top?s.y-a.y-i.height+(l?u.top:0)-2:s.y-a.y+s.height+(l?u.top:0)+2,m=s.x+i.width>m.x+m.width+u.left?s.x-a.x+s.width-i.width+(l?u.left:0):s.x-a.x+(l?u.left:0),this._pos)?this._pos({x:p,y:c,vx:p,vy:c,ix:m,iy:v}):(o=(n="out-place"===this._mode?(o=(n=[p,c])[0],n[1],n):[m,v])[0],t.style.transform="translate("+o+"px, "+n[1]+"px)",(n=t.style).top=0,n.left=0,this.render())}}else this._toggle(!1),document.removeEventListener("mouseup",this.hdr.mouseup),document.removeEventListener("keydown",this.hdr.keydown);function f(t){return"visible"!==h[t]}},update:function(t){s=[(t=t||this.cur).year(),t.month()];var o,e,d,r,l,h,a,u,s,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],l=s[2],s=this.sel?[this.sel.year(),this.sel.month(),this.sel.date()]:[null,null,null],h=s[0],a=s[1],u=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()],i=s[0],n=s[1],s=s[2];return t.date={year:i,month:n,date:s},t.innerText=e.date(),t.classList.toggle("dim",e.month()!==c),t.classList.toggle("today",d===i&&r===n&&l===s),t.classList.toggle("selected",h===i&&a===n&&u===s)}),s=this.value(),this.host&&(this.host.value=s),this._renderView(),s!==this._value)return this._value=s,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")},config:function(t){return null==t?{suppress:!!this._suppress,viewMode:!!this._viewMode,time:{enabled:!!this._enabled.time}}:(null!=t.suppress&&(this._suppress=t.suppress),null!=t.viewMode&&(this._viewMode=!!t.viewMode),null!=t.time&&(this._enabled.time=t.time),null!=t.time||null!=t.viewMode?this.render():void 0)},render:function(){return this.n.t.style.display=this._enabled.time?"":"none",this._renderView()},_viewNode:function(){var t,e,s=this;return this._vnode||!this.host?this._vnode:(t=this.host.offsetParent)?(this._vnode=e=document.createElement("div"),e.className="lddtp-v",t.appendChild(e),this._vsync=function(){return s._syncView()},window.addEventListener("resize",this._vsync),e):null},_syncView:function(){var t,e,s;if(this._vnode&&this.host)return t=(e=[this._vnode,this.host])[0],e=e[1],s=getComputedStyle(e),i(t.style,{left:e.offsetLeft+"px",top:e.offsetTop+"px",width:e.offsetWidth+"px",height:e.offsetHeight+"px",padding:s.paddingTop+" "+s.paddingRight+" "+s.paddingBottom+" "+s.paddingLeft,borderWidth:s.borderTopWidth+" "+s.borderRightWidth+" "+s.borderBottomWidth+" "+s.borderLeftWidth,borderStyle:s.borderTopStyle+" "+s.borderRightStyle+" "+s.borderBottomStyle+" "+s.borderLeftStyle,borderColor:s.borderTopColor+" "+s.borderRightColor+" "+s.borderBottomColor+" "+s.borderLeftColor,borderRadius:s.borderRadius,background:s.backgroundColor,color:this._textColor,fontFamily:s.fontFamily,fontSize:s.fontSize,fontWeight:s.fontWeight,textAlign:s.textAlign})},_hideView:function(){if(this._vnode&&(this._vnode.style.display="none"),null!=this._hostColor)return this.host.style.color=this._hostColor,this._hostColor=null},_renderView:function(){var t,e;if(this.host)return!this._viewMode||this._focused?this._hideView():(t=this._viewNode())?(null==this._hostColor&&(this._textColor=getComputedStyle(this.host).color,this._hostColor=this.host.style.color||"",this.host.style.color="transparent"),e=this.sel,t.innerHTML='<span class="lddtp-v-d">'+e.format("YYYY/MM/DD")+"</span>"+(this._enabled.time?'<span class="lddtp-v-t">'+e.format("HH:mm")+'</span><span class="lddtp-v-z">'+s(e)+"</span>":""),t.style.display="flex",this._syncView()):void 0}}),"undefined"!=typeof module&&null!==module?module.exports=t:"undefined"!=typeof window&&null!==window&&(window.lddatetimepicker=t)}.call(this);

package/package.json

@@ -1 +1 @@
-{"name":"lddatetimepicker","version":"0.0.14","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.12","@loadingio/debounce.js":"^1.0.1","@zbryikt/template":"^2.4.1","bootstrap":"^4.6.1","dayjs":"^1.11.0","fedep":"^1.6.0","ldcover":"^3.5.6","ldview":"^1.7.1","livescript":"^1.6.0","proxise":"^1.0.1","stylus":"^0.57.0","uglify-js":"^3.15.3","uglifycss":"^0.0.29","zmgr":"^2.2.3"},"frontendDependencies":{"root":"web/static/assets/lib","modules":["@loadingio/bootstrap.ext","@loadingio/debounce.js","@loadingio/ldquery","dayjs","bootstrap","ldcover","ldview","zmgr","proxise"]},"dependencies":{"@loadingio/ldquery":"^3.0.6"}}
+{"name":"lddatetimepicker","version":"0.0.16","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.12","@loadingio/debounce.js":"^1.0.1","@plotdb/guides":"github:plotdb/guides#master","@zbryikt/template":"^2.5.0","bootstrap":"^4.6.1","dayjs":"^1.11.0","fedep":"^1.9.0","ldcover":"^3.6.0","ldview":"^1.7.2","livescript":"^1.6.0","proxise":"^1.0.1","stylus":"^0.57.0","uglify-js":"^3.15.3","uglifycss":"^0.0.29","zmgr":"^2.2.3"},"frontendDependencies":{"root":"web/static/assets/lib","modules":["@loadingio/bootstrap.ext","@loadingio/debounce.js","dayjs","bootstrap","ldcover","ldview","zmgr","proxise"]}}