-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathsmart.dateinput.js
6 lines (4 loc) · 12.7 KB
/
smart.dateinput.js
1
2
3
4
5
6
/* Smart UI v15.2.0 (2023-04-20)
Copyright (c) 2011-2023 jQWidgets.
License: https://htmlelements.com/license/ */ //
Smart("smart-date-input",class extends Smart.Input{static get properties(){return{autoClose:{value:!1,type:"boolean"},autoCloseDelay:{value:0,type:"number"},dropDownButtonPosition:{allowedValues:["none","left","right"],value:"right",defaultReflectToAttribute:!0,type:"string"},dropDownHeight:{type:"any",value:"auto"},min:{type:"any",value:new Date(1900,0,1)},max:{type:"any",value:new Date(2100,0,1)},messages:{value:{en:{hours:"Hours",minutes:"Minutes",am:"am",pm:"pm"}},type:"object",extend:!0},placeholder:{value:"MM/dd/yyyy",type:"string"},formatString:{value:"",type:"string"},dateTimeFormat:{type:"any",value:{year:"numeric",month:"numeric",day:"numeric"}},value:{type:"any",value:""}}}template(){return'<div id="inputContainer" role="presentation"><input class="smart-input" id=\'input\' readonly=\'[[readonly]]\' placeholder=\'[[placeholder]]\' type=\'[[type]]\' name=\'[[name]]\' disabled=\'[[disabled]]\' aria-label="[[placeholder]]" /><span class="smart-hidden smart-hint" id="span">[[hint]]</span><div id="dropDownButton" tabindex=-1 class="smart-drop-down-button" role="button" aria-label="Toggle popup"><div id="arrow" class="arrow" aria-hidden="true"></div></div></div>'}static get listeners(){return{"input.change":"_changeHandler","input.focus":"_focusHandler","input.blur":"_blurHandler","input.keydown":"_keyDownHandler","input.keyup":"_keyUpHandler","input.keypress":"_keyPressHandler","dropDownButton.down":"_dropDownButtonDownHandler","inputContainer.down":"_downHandler","document.up":"_documentUpHandler"}}_calendarDropDownClickHandler(e){const t=this;t.autoClose&&e.target.closest(".smart-calendar-cell")&&"month"===t.$.calendar.displayMode&&(clearTimeout(t._autoCloseTimeout),t._autoCloseTimeout=setTimeout((function(){t.close()}),t.autoCloseDelay))}render(){super.render(),this.formatString&&this.formatString.length>1&&"MM/dd/yyyy"===this.placeholder&&(this.placeholder=this.formatString),this.value&&this.value instanceof Date&&this._setInputValue(this.value)}focus(){this.$.input.focus()}select(){const e=this;e.readonly?e.$.input.focus():e.$.input.select()}_documentUpHandler(e){const t=this,a=t.shadowRoot||t.isInShadowDOM?e.originalEvent.composedPath()[0]:e.originalEvent.target;t.contains(a)?requestAnimationFrame((()=>{})):t.$.scrollView.contains(a.shadowParent||a)?t._isPointerDown&&(t._isPointerDown=!1,t.opened&&(t._preventLookup=!0),t.$.input.focus()):(t.opened&&(t._preventLookup=!0),t._isPointerDown=!1,t.close())}_changeHandler(e){const t=this;e.stopPropagation(),t._performSelect();const a=t._getInputValue();t._oldValue||(t._oldValue=null),t.$.fireEvent("change",{value:a,oldValue:t._oldValue}),t._updateTargetValue(),t._oldValue=a}_focusHandler(){const e=this;if(e.setAttribute("focus",""),e.readonly||0!==e.minLength||0!==e.$.input.value.length||e._preventLookup){if(e.$.fireEvent("focus"),e.value){const t=e._getInputValue();e._setInputValue(t)}delete e._preventLookup}}_blurHandler(){const e=this;if(e.opened||e.removeAttribute("focus"),e._popup&&e._popup.isCompleted&&e.opened)e._setInputValue(e._popup.value);else{const t=e._getInputValue();e._setInputValue(t)}e.$.fireEvent("blur"),delete e._preventLookup}_getInputValue(){const e=this,t=e.$.input.value;let a=null;const o=t=>{let a=new Date(Date.parse(t));if("Invalid Date"===a.toString()&&(a=null),e.formatString){let a=(new Smart.Utilities.DateTime).tryparseDate(t,null,e.formatString);if(a)return a}if(!a||e.locale&&"en"!==e.locale){let a=(new Smart.Utilities.DateTime).tryparseDate(t,null,e.formatString);if(a)return a}return a};return e.dateTimeFormat.day&&e.dateTimeFormat.month&&e.dateTimeFormat.year?a=o(t):e.dateTimeFormat.day&&e.dateTimeFormat.month&&!e.dateTimeFormat.year?(a=o(t),e._popup.value||(e._popup.value=new Date),e._popup.isCompleted?a.setFullYear(e._popup.value.getFullYear(),a.getMonth(),a.getDate()):a.setFullYear((new Date).getFullYear(),a.getMonth(),a.getDate())):!e.dateTimeFormat.day&&e.dateTimeFormat.month&&e.dateTimeFormat.year&&(e._popup.value||(e._popup.value=new Date),a=o(t),e._popup.isCompleted?a.setFullYear(a.getFullYear(),a.getMonth(),e._popup.value.getDate()):a.setFullYear(a.getFullYear(),a.getMonth(),(new Date).getDate())),""!==e.min&&a<e.min&&(a=e.min),""!==e.max&&a>e.max&&(a=e.max),a}getDate(){return this._getInputValue()}getValue(){return this._getInputValue()}setValue(e){this._setInputValue(e)}_setInputValue(e){const t=this;if(!e)return t.$.input.value="",t.removeAttribute("data-value"),t.value=null,void(t._popup&&(t._popup.value=new Date));""!==t.min&&e<t.min&&(e=t.min),""!==t.max&&e>t.max&&(e=t.max);const a=t.dateTimeFormat;a&&a.timeZone&&delete a.timeZone;let o=new Intl.DateTimeFormat(t.locale,a).format(e);if(t.hasAttribute("focus")&&(o=new Intl.DateTimeFormat(t.locale,{year:"numeric",day:"numeric",month:"numeric"}).format(e)),t.formatString&&t.formatString.length>1){let a=new Smart.Utilities.DateTime(e).toString(t.formatString);t.locale&&"en"!==t.locale&&(o.indexOf(".")>=0?a=a.replaceAll("/","."):o.indexOf("-")>=0&&(a=a.replaceAll("/","-"))),o=a}t.$.input.value=t.value=o,t.setAttribute("data-value",e)}_performSelect(){}getFormattedValue(e,t){const a=this;if(null===t)return parseFloat(e);e||(e=new Date),t||(t=a.dateTimeFormat).timeZone&&delete t.timeZone;const o=new Intl.DateTimeFormat(a.locale,t).format(e);return a.formatString&&a.formatString.length>1?new Smart.Utilities.DateTime(e).toString(a.formatString):o}_open(){const e=this,t=e.getBoundingClientRect(),a=window.scrollX,o=window.scrollY;let n=0,r=0;if(this.opened)return;if(e.timer&&clearTimeout(e.timer),document.body.appendChild(e.$.scrollView),e.setAttribute("aria-owns",e.$.scrollView.id),e.readonly||e.$.input.setAttribute("aria-controls",e.$.scrollView.id),e.$.scrollView.enableShadowDOM&&!e._importedStyle&&(e.$.scrollView.importStyle(e._getStyleUrl("smart.textbox.css")),e._importedStyle=!0),"static"!==getComputedStyle(document.body).position){const e=document.body.getBoundingClientRect();n=e.left,r=e.top}const l=document.body.getBoundingClientRect(),i=-3+t.left+a-n;e.$.scrollView.style.setProperty("--smart-input-drop-down-menu-width",""),i+e.$.scrollView.offsetWidth<l.right?e.$.scrollView.style.left=i+"px":e.$.scrollView.style.left=i+e.offsetWidth-e.$.scrollView.offsetWidth+"px",e.$.scrollView.style.top=t.bottom+o-r+1+"px",e.$.scrollView.classList.remove("open"),e.$.scrollView.onpointerdown=function(){e._isPointerDown=!0},e._refreshPopup(),requestAnimationFrame((function(){e.$.scrollView.setAttribute("open",""),e.setAttribute("open",""),e.$.dropDownButton.setAttribute("open",""),e.$.input.setAttribute("open","")})),this.opened=!0}_refreshPopup(){const e=this,t=e._getInputValue();e._popup.isAttached&&e._popup.select(t)}close(){const e=this;return!!e.opened&&(e.timer&&clearTimeout(e.timer),e.timer=setTimeout((function(){e.$.scrollView.parentNode&&!e.opened&&(document.body.removeChild(e.$.scrollView),e.removeAttribute("aria-owns"),e.readonly||e.$.input.removeAttribute("aria-controls"))}),1e3),e.$.scrollView.removeAttribute("open"),e.$.dropDownButton.removeAttribute("open"),e.$.input.removeAttribute("open"),e.removeAttribute("open"),e.opened=!1,!0)}_lookup(){}_downHandler(e){const t=this;t.readonly&&t._dropDownButtonDownHandler(e)}_dropDownButtonDownHandler(e){return this._toggle(),e.preventDefault(),e.stopPropagation(),e.originalEvent.preventDefault(),e.originalEvent.stopPropagation(),!1}_toggle(){const e=this;e.opened?e.close():e.open()}open(){const e=this;e._process(),e.$.input.focus(),setTimeout((function(){e.$.input.focus()}),25)}_process(){this._performSelect(void 0,!0),this._open()}_matcher(){}_sorter(){}_highlighter(){}_render(){}ensureVisible(){}_next(){}_prev(){}_move(e){e.stopPropagation()}_keyPressHandler(e){this._suppressKeyPressRepeat||e.shiftKey||e.altKey||e.ctrlKey}_insertKey(e,t=1){const a=this,o=a.$.input.selectionStart,n=a.$.input.value,r=n.substring(0,o),l=n.substring(o+t);a.$.input.value=r+e.key+l,a.$.input.selectionStart=a.$.input.selectionEnd=o+1}_keyDownHandler(e){const t=this;t._suppressKeyPressRepeat=![40,38,9,13,27,16,17,18].includes(e.keyCode);let a=!1;switch(e.keyCode>=48&&e.keyCode<=57&&(a=!0),e.keyCode>=96&&e.keyCode<=105&&(a=!0),e.key){case"/":case"-":case":":case"ArrowLeft":case"ArrowUp":case"ArrowDown":case"ArrowRight":case"Home":case"End":case"Delete":case"Backspace":case"Tab":a=!0}e.ctrlKey&&(a=!0),a||e.preventDefault(),"Tab"===e.key&&t.close(),e.shiftKey||e.altKey||e.ctrlKey}_getMask(){const e=this,t=e.getFormattedValue(new Date(2020,10,10),{year:"numeric",month:"numeric",day:"numeric"});let a="/";t.indexOf(".")>=0?a=".":t.indexOf("-")>=0&&(a="-");const o=t.split(a);e._mask=[];let n=0;for(let t=0;t<o.length-1;t++)n+=o[t].length,e._mask[n]=a,n++}_appendPreOrPostMatch(e,t){for(var a=0,o=!1,n=0,r=e.length;n<r;n++){var l=e.charAt(n);switch(l){case"'":o?t.push("'"):a++,o=!1;break;case"\\":o&&t.push("\\"),o=!o;break;default:t.push(l),o=!1}}return a}_keyUpHandler(e){const t=this;let a=t.$.input.value.trim();const o=new Date(a);if(e.keyCode>=48&&e.keyCode<=57||e.keyCode>=96&&e.keyCode<=105){if(void 0!==t._mask[a.length]){let e=[...a],o=t._mask.flat().length,n=0;for(let o=0;o<e.length;o++)e[o]===t._mask[a.length]&&n++;n<o&&(a+=t._mask[a.length],t.$.input.value=a)}}else if(" "===e.key||"Enter"===e.key){const a=t._getInputValue();t._setInputValue(a),"Enter"===e.key&&t.opened&&t.close()}else if("/"===e.key||":"===e.key||"-"===e.key){const e=t.$.input.selectionStart,a=t._getInputValue();t._setInputValue(a),t.$.input.selectionStart=e,"/"===t.$.input.value[e]&&t.$.input.selectionStart++}if("Invalid Date"!==o.toString()?t.value=o:t.value=null,t._refreshPopup(),!e.shiftKey)switch(e.keyCode){case 40:case 38:case 16:case 17:case 18:40===e.keyCode&&e.altKey&&(t.open(),setTimeout((()=>{t._popup.focus()}),50)),38===e.keyCode&&e.altKey&&(t.close(),t.focus());break;case 27:if(!t.opened)return;t.close(),e.stopPropagation(),e.preventDefault()}}propertyChangedHandler(e,t,a){const o=this;switch(e){case"dateTimeFormat":case"formatString":o._setInputValue(o.value);break;case"value":"string"==typeof a?o.$.input.value=a:o._setInputValue(a);break;case"month":case"min":case"max":o.$.calendar[e]=a;break;case"theme":case"rightToLeft":case"animation":case"inverted":o.$.calendar&&(o.$.calendar[e]=a),o.$.scrollView&&(a?o.$.scrollView.setAttribute(Smart.Utilities.Core.toDash(e),"boolean"==typeof a?"":a):o.$.scrollView.removeAttribute(Smart.Utilities.Core.toDash(e)));break;case"locale":o._getMask(),o._performSelect(),o.$.calendar&&(o.$.calendar.locale=a);break;default:super.propertyChangedHandler(e,t,a)}}_createElement(){const e=this,t=document.createElement("div");if(t.classList.add("smart-input-drop-down-menu","smart-date-input-drop-down-menu"),t.setAttribute("animation",e.animation),t.setAttribute("role","presentation"),e.rightToLeft?t.setAttribute("right-to-left",""):t.removeAttribute("right-to-left"),e.inverted?t.setAttribute("inverted",""):t.removeAttribute("inverted"),t.onclick=function(t){t.stopPropagation(),t.preventDefault();const a=t.target;t.altKey?e.$.input.focus():e._popup.focus(),a.closest("smart-done-button")&&e.close()},!t.id){const e=t.tagName.toLowerCase();t.id=e.slice(0,1).toLowerCase()+e.slice(1)+Math.floor(65536*(1+Math.random())).toString(16).substring(1)}e.$.scrollView=t,e.classList.add("smart-input");const a=document.createElement("smart-calendar");if(e._popup=a,e.$.calendar=a,e.$.calendar.locale=e.locale,e.$.calendar.min=e.min,e.$.calendar.max=e.max,e.$.calendar.value=e.value,a.$.listen("keyup",(t=>{if("Enter"===t.key){e._oldValue||(e._oldValue=null);const t=a.selectedDates[0];a.value=t,e._setInputValue(t),e.$.fireEvent("change",{value:t,oldValue:e._oldValue}),e.set("value",t),e._updateTargetValue(),e._oldValue=t,e.close(),e.focus()}"Escape"===t.key&&(e.close(),e.focus()),"Tab"===t.key&&(e.close(),e.focus())})),a.onclick=t=>{e._oldValue||(e._oldValue=null);const o=a.selectedDates[0];e._setInputValue(o),e._calendarDropDownClickHandler(t),e.$.fireEvent("change",{value:o,oldValue:e._oldValue}),e.set("value",o),e._updateTargetValue(),e._oldValue=o},t.appendChild(a),e.$.input.value=e.value,e.value&&(""+e.value).length>0){const t=e._getInputValue();e._oldValue=t,e._setInputValue(t)}e._getMask()}_refreshMenu(){}_setAriaRelations(){const e=this,t=e.getAttribute("aria-label");e.readonly?(e.setAttribute("role","button"),!t&&e.placeholder&&e.setAttribute("aria-label",e.placeholder),e.removeAttribute("aria-readonly"),e.$.input.setAttribute("aria-hidden",!0),e.$.input.removeAttribute("aria-controls"),e.$.dropDownButton.setAttribute("aria-hidden",!0)):(e.setAttribute("role","presentation"),t&&t===e.placeholder&&e.removeAttribute("aria-label"),e.$.input.removeAttribute("aria-hidden"),e.$.dropDownButton.removeAttribute("aria-hidden")),e.setAttribute("aria-haspopup","dialog"),e.$.scrollView.setAttribute("role","dialog")}_setActiveDescendant(){}_setInputPurpose(){}});