@easepick/time-plugin - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2-beta.0

dist/index.d.ts

@@ -13,2 +13,7 @@ import { BasePlugin, IPlugin } from '@easepick/base-plugin';
     };
+    timePrePicked: {
+        input: any;
+        start: any;
+        end: any;
+    };
     binds: {
@@ -21,3 +26,6 @@ getDate: any;
         onChange: any;
-        onSelect: any;
+        onClick: any;
+        setTime: any;
+        setStartTime: any;
+        setEndTime: any;
     };
@@ -40,23 +48,2 @@ /**
     /**
-     * Adds time to DateTime object
-     * Replaces the original `getDate` function
-     *
-     * @returns DateTime
-     */
-    private getDate;
-    /**
-     * Adds time to DateTime object
-     * Replaces the original `getStartDate` function
-     *
-     * @returns DateTime
-     */
-    private getStartDate;
-    /**
-     * Adds time to DateTime object
-     * Replaces the original `getEndDate` function
-     *
-     * @returns DateTime
-     */
-    private getEndDate;
-    /**
      * Function `view` event
@@ -79,17 +66,48 @@ * Adds HTML layout of current plugin to the picker layout
     private onChange;
+    private onClick;
     /**
-     * Handle `select` event
+     * Set time programmatically
      *
-     * @param event
+     * @param value
+     * @param keyName
      */
-    private onSelect;
+    private setTime;
     /**
-     * Returns date and time as string
+     * Set start time programmatically
      *
-     * @param date
-     * @returns String
+     * @param value
+     * @param keyName
      */
-    private formatDateTime;
+    private setStartTime;
     /**
+     * Set end time programmatically
      *
+     * @param value
+     * @param keyName
+     */
+    private setEndTime;
+    private handleTimeString;
+    /**
+     * Adds time to DateTime object
+     * Replaces the original `getDate` function
+     *
+     * @returns DateTime
+     */
+    private getDate;
+    /**
+     * Adds time to DateTime object
+     * Replaces the original `getStartDate` function
+     *
+     * @returns DateTime
+     */
+    private getStartDate;
+    /**
+     * Adds time to DateTime object
+     * Replaces the original `getEndDate` function
+     *
+     * @returns DateTime
+     */
+    private getEndDate;
+    /**
+     *
      * @returns HTMLElement
@@ -131,2 +149,3 @@ */
     private handleFormat12;
+    private parseValues;
 }

dist/index.esm.js

@@ -1,1 +0,1 @@
-import{DateTime as t}from"@easepick/datetime";import{BasePlugin as e}from"@easepick/base-plugin";class i extends e{options={native:!1,format:"HH:mm",append:"start",seconds:!1,stepHours:1,stepMinutes:5,stepSeconds:5,format12:!1};rangePlugin;timePicked={input:null,start:null,end:null};binds={getDate:this.getDate.bind(this),getStartDate:this.getStartDate.bind(this),getEndDate:this.getEndDate.bind(this),onView:this.onView.bind(this),onInput:this.onInput.bind(this),onChange:this.onChange.bind(this),onSelect:this.onSelect.bind(this)};getName(){return"TimePlugin"}onAttach(){this.binds._getDate=this.picker.getDate,this.binds._getStartDate=this.picker.getStartDate,this.binds._getEndDate=this.picker.getEndDate,Object.defineProperties(this.picker,{getDate:{configurable:!0,value:this.binds.getDate},getStartDate:{configurable:!0,value:this.binds.getStartDate},getEndDate:{configurable:!0,value:this.binds.getEndDate}}),this.picker.on("view",this.binds.onView),this.picker.on("input",this.binds.onInput),this.picker.on("change",this.binds.onChange),this.picker.on("select",this.binds.onSelect)}onDetach(){Object.defineProperties(this.picker,{getDate:{configurable:!0,value:this.binds._getDate},getStartDate:{configurable:!0,value:this.binds._getStartDate},getEndDate:{configurable:!0,value:this.binds._getEndDate}}),this.picker.off("view",this.binds.onView),this.picker.off("input",this.binds.onInput),this.picker.off("change",this.binds.onChange),this.picker.off("select",this.binds.onSelect)}getDate(){if(this.picker.options.date instanceof Date){const e=new t(this.picker.options.date);if(this.timePicked.input){const t=this.timePicked.input;e.setHours(t.getHours(),t.getMinutes(),t.getSeconds(),0)}return e}return null}getStartDate(){if(this.rangePlugin.options.startDate instanceof Date){const e=new t(this.rangePlugin.options.startDate);if(this.timePicked.start){const t=this.timePicked.start;e.setHours(t.getHours(),t.getMinutes(),t.getSeconds(),0)}return e}return null}getEndDate(){if(this.rangePlugin.options.endDate instanceof Date){const e=new t(this.rangePlugin.options.endDate);if(this.timePicked.end){const t=this.timePicked.end;e.setHours(t.getHours(),t.getMinutes(),t.getSeconds(),0)}return e}return null}onView(t){const{view:e,target:i}=t.detail;if("Main"===e){this.rangePlugin=this.picker.PluginManager.getInstance("RangePlugin");const t=document.createElement("div");if(t.className="time-plugin-container",this.rangePlugin){const e=this.getStartInput();t.appendChild(e),this.picker.trigger("view",{view:"TimePluginInput",target:e});const i=this.getEndInput();t.appendChild(i),this.picker.trigger("view",{view:"TimePluginInput",target:i})}else{const e=this.getSingleInput();t.appendChild(e),this.picker.trigger("view",{view:"TimePluginInput",target:e})}i.appendChild(t),this.picker.trigger("view",{view:"TimePluginContainer",target:t})}}onInput(e){const i=e.target;if(i instanceof HTMLInputElement&&i.classList.contains("time-plugin-input")){const e=this.timePicked[i.name]||new t,[n,s]=i.value.split(":");e.setHours(Number(n)||0,Number(s)||0,0,0),this.timePicked[i.name]=e}}onChange(e){const i=e.target;if(i instanceof HTMLSelectElement&&i.classList.contains("time-plugin-custom-input")){const e=/(\w+)\[(\w+)\]/,[,n,s]=i.name.match(e),o=Number(i.value),a=this.timePicked[n]||new t;switch(s){case"HH":if(this.options.format12){const t=i.closest(".time-plugin-custom-block").querySelector(`select[name="${n}[period]"]`).value,e=this.handleFormat12(t,a,o);a.setHours(e.getHours(),e.getMinutes(),e.getSeconds(),0)}else a.setHours(o,a.getMinutes(),a.getSeconds(),0);break;case"mm":a.setHours(a.getHours(),o,a.getSeconds(),0);break;case"ss":a.setHours(a.getHours(),a.getMinutes(),o,0);break;case"period":if(this.options.format12){const t=i.closest(".time-plugin-custom-block").querySelector(`select[name="${n}[HH]"]`).value,e=this.handleFormat12(i.value,a,Number(t));a.setHours(e.getHours(),e.getMinutes(),e.getSeconds(),0)}}this.timePicked[n]=a}}onSelect(t){const{date:e,start:i,end:n}=t.detail,s=this.picker.options,o=s.element,a=this.picker.PluginManager.getInstance("RangePlugin");if(a){const t=this.formatDateTime(i),e=this.formatDateTime(n);if(a.options.elementEnd){const i=s.RangePlugin.elementEnd;o.value=t,i.value=e}else o instanceof HTMLInputElement?o.value=`${t}${a.options.delimiter}${e}`:o instanceof HTMLElement&&(o.innerText=`${t}${a.options.delimiter}${e}`)}else{const t=this.formatDateTime(e);o instanceof HTMLInputElement?o.value=t:o instanceof HTMLElement&&(o.innerText=t)}}formatDateTime(t){if(!t)return"";const e=[],i=this.picker.options;return this.options.format12?(e.push(t.toJSDate().toLocaleString("en-US",{hour:"numeric",minute:"numeric",hour12:!0})),e.push(t.format(i.format))):(e.push(t.format(this.options.format)),e.push(t.format(i.format))),"end"===this.options.append?e.reverse().join(" "):e.join(" ")}getSingleInput(){return this.options.native?this.getNativeInput("input"):this.getCustomInput("input")}getStartInput(){return this.options.native?this.getNativeInput("start"):this.getCustomInput("start")}getEndInput(){return this.options.native?this.getNativeInput("end"):this.getCustomInput("end")}getNativeInput(t){const e=document.createElement("input");e.type="time",e.name=t,e.className="time-plugin-input unit";const i=this.timePicked[t];if(i){const t=`0${i.getHours()}`.slice(-2),n=`0${i.getMinutes()}`.slice(-2);e.value=`${t}:${n}`}return e}getCustomInput(t){const e=document.createElement("div");e.className="time-plugin-custom-block";const i=document.createElement("select");i.className="time-plugin-custom-input unit",i.name=`${t}[HH]`;const n=this.options.format12?1:0,s=this.options.format12?13:24,o=this.timePicked[t];for(let t=n;t<s;t+=this.options.stepHours){const e=document.createElement("option");if(e.value=String(t),e.text=String(t),o)if(this.options.format12){(o.getHours()%12?o.getHours()%12:12)===t&&(e.selected=!0)}else o.getHours()===t&&(e.selected=!0);i.appendChild(e)}e.appendChild(i);const a=document.createElement("select");a.className="time-plugin-custom-input unit",a.name=`${t}[mm]`;for(let t=0;t<60;t+=this.options.stepMinutes){const e=document.createElement("option");e.value=`0${String(t)}`.slice(-2),e.text=`0${String(t)}`.slice(-2),o&&o.getMinutes()===t&&(e.selected=!0),a.appendChild(e)}if(e.appendChild(a),this.options.seconds){const i=document.createElement("select");i.className="time-plugin-custom-input unit",i.name=`${t}[ss]`;const n=60;for(let t=0;t<n;t+=this.options.stepSeconds){const e=document.createElement("option");e.value=`0${String(t)}`.slice(-2),e.text=`0${String(t)}`.slice(-2),o&&o.getSeconds()===t&&(e.selected=!0),i.appendChild(e)}e.appendChild(i)}if(this.options.format12){const i=document.createElement("select");i.className="time-plugin-custom-input unit",i.name=`${t}[period]`,["AM","PM"].forEach((t=>{const e=document.createElement("option");e.value=t,e.text=t,o&&"PM"===t&&o.getHours()>=12&&(e.selected=!0),i.appendChild(e)})),e.appendChild(i)}return e}handleFormat12(t,e,i){const n=e.clone();switch(t){case"AM":12===i?n.setHours(0,n.getMinutes(),n.getSeconds(),0):n.setHours(i,n.getMinutes(),n.getSeconds(),0);break;case"PM":12!==i?n.setHours(i+12,n.getMinutes(),n.getSeconds(),0):n.setHours(i,n.getMinutes(),n.getSeconds(),0)}return n}}export{i as TimePlugin};
+import{DateTime as t}from"@easepick/datetime";import{BasePlugin as e}from"@easepick/base-plugin";class i extends e{options={native:!1,seconds:!1,stepHours:1,stepMinutes:5,stepSeconds:5,format12:!1};rangePlugin;timePicked={input:null,start:null,end:null};timePrePicked={input:null,start:null,end:null};binds={getDate:this.getDate.bind(this),getStartDate:this.getStartDate.bind(this),getEndDate:this.getEndDate.bind(this),onView:this.onView.bind(this),onInput:this.onInput.bind(this),onChange:this.onChange.bind(this),onClick:this.onClick.bind(this),setTime:this.setTime.bind(this),setStartTime:this.setStartTime.bind(this),setEndTime:this.setEndTime.bind(this)};getName(){return"TimePlugin"}onAttach(){this.binds._getDate=this.picker.getDate,this.binds._getStartDate=this.picker.getStartDate,this.binds._getEndDate=this.picker.getEndDate,Object.defineProperties(this.picker,{getDate:{configurable:!0,value:this.binds.getDate},getStartDate:{configurable:!0,value:this.binds.getStartDate},getEndDate:{configurable:!0,value:this.binds.getEndDate},setTime:{configurable:!0,value:this.binds.setTime},setStartTime:{configurable:!0,value:this.binds.setStartTime},setEndTime:{configurable:!0,value:this.binds.setEndTime}}),this.rangePlugin=this.picker.PluginManager.getInstance("RangePlugin"),this.parseValues(),this.picker.on("view",this.binds.onView),this.picker.on("input",this.binds.onInput),this.picker.on("change",this.binds.onChange),this.picker.on("click",this.binds.onClick)}onDetach(){delete this.picker.setTime,delete this.picker.setStartTime,delete this.picker.setEndTime,Object.defineProperties(this.picker,{getDate:{configurable:!0,value:this.binds._getDate},getStartDate:{configurable:!0,value:this.binds._getStartDate},getEndDate:{configurable:!0,value:this.binds._getEndDate}}),this.picker.off("view",this.binds.onView),this.picker.off("input",this.binds.onInput),this.picker.off("change",this.binds.onChange),this.picker.off("click",this.binds.onClick)}onView(t){const{view:e,target:i}=t.detail;if("Main"===e){this.rangePlugin=this.picker.PluginManager.getInstance("RangePlugin");const t=document.createElement("div");if(t.className="time-plugin-container",this.rangePlugin){const e=this.getStartInput();t.appendChild(e),this.picker.trigger("view",{view:"TimePluginInput",target:e});const i=this.getEndInput();t.appendChild(i),this.picker.trigger("view",{view:"TimePluginInput",target:i})}else{const e=this.getSingleInput();t.appendChild(e),this.picker.trigger("view",{view:"TimePluginInput",target:e})}i.appendChild(t),this.picker.trigger("view",{view:"TimePluginContainer",target:t})}}onInput(e){const i=e.target;if(i instanceof HTMLInputElement&&i.classList.contains("time-plugin-input")){const e=this.timePicked[i.name]||new t,[n,s]=i.value.split(":");e.setHours(Number(n)||0,Number(s)||0,0,0),this.picker.options.autoApply?(this.timePicked[i.name]=e,this.picker.updateValues()):this.timePrePicked[i.name]=e}}onChange(e){const i=e.target;if(i instanceof HTMLSelectElement&&i.classList.contains("time-plugin-custom-input")){const e=/(\w+)\[(\w+)\]/,[,n,s]=i.name.match(e),o=Number(i.value);let a=new t;switch(!this.picker.options.autoApply&&this.timePrePicked[n]instanceof Date?a=this.timePrePicked[n].clone():this.timePicked[n]instanceof Date&&(a=this.timePicked[n].clone()),s){case"HH":if(this.options.format12){const t=i.closest(".time-plugin-custom-block").querySelector(`select[name="${n}[period]"]`).value,e=this.handleFormat12(t,a,o);a.setHours(e.getHours(),e.getMinutes(),e.getSeconds(),0)}else a.setHours(o,a.getMinutes(),a.getSeconds(),0);break;case"mm":a.setHours(a.getHours(),o,a.getSeconds(),0);break;case"ss":a.setHours(a.getHours(),a.getMinutes(),o,0);break;case"period":if(this.options.format12){const t=i.closest(".time-plugin-custom-block").querySelector(`select[name="${n}[HH]"]`).value,e=this.handleFormat12(i.value,a,Number(t));a.setHours(e.getHours(),e.getMinutes(),e.getSeconds(),0)}}this.picker.options.autoApply?(this.timePicked[n]=a,this.picker.updateValues()):this.timePrePicked[n]=a}}onClick(t){const e=t.target;if(e instanceof HTMLElement){const t=e.closest(".unit");if(!(t instanceof HTMLElement))return;this.picker.isApplyButton(t)&&(Object.keys(this.timePicked).forEach((t=>{this.timePrePicked[t]instanceof Date&&(this.timePicked[t]=this.timePrePicked[t].clone())})),this.picker.updateValues(),this.timePrePicked={input:null,start:null,end:null}),this.picker.isCancelButton(t)&&(this.timePrePicked={input:null,start:null,end:null},this.picker.renderAll())}}setTime(t){const e=this.handleTimeString(t);this.timePicked.input=e.clone(),this.picker.renderAll(),this.picker.updateValues()}setStartTime(t){const e=this.handleTimeString(t);this.timePicked.start=e.clone(),this.picker.renderAll(),this.picker.updateValues()}setEndTime(t){const e=this.handleTimeString(t);this.timePicked.end=e.clone(),this.picker.renderAll(),this.picker.updateValues()}handleTimeString(e){const i=new t,[n,s,o]=e.split(":").map((t=>Number(t))),a=n&&!Number.isNaN(n)?n:0,c=s&&!Number.isNaN(s)?s:0,r=o&&!Number.isNaN(o)?o:0;return i.setHours(a,c,r,0),i}getDate(){if(this.picker.options.date instanceof Date){const e=new t(this.picker.options.date,this.picker.options.format);if(this.timePicked.input instanceof Date){const t=this.timePicked.input;e.setHours(t.getHours(),t.getMinutes(),t.getSeconds(),0)}return e}return null}getStartDate(){if(this.rangePlugin.options.startDate instanceof Date){const e=new t(this.rangePlugin.options.startDate,this.picker.options.format);if(this.timePicked.start instanceof Date){const t=this.timePicked.start;e.setHours(t.getHours(),t.getMinutes(),t.getSeconds(),0)}return e}return null}getEndDate(){if(this.rangePlugin.options.endDate instanceof Date){const e=new t(this.rangePlugin.options.endDate,this.picker.options.format);if(this.timePicked.end instanceof Date){const t=this.timePicked.end;e.setHours(t.getHours(),t.getMinutes(),t.getSeconds(),0)}return e}return null}getSingleInput(){return this.options.native?this.getNativeInput("input"):this.getCustomInput("input")}getStartInput(){return this.options.native?this.getNativeInput("start"):this.getCustomInput("start")}getEndInput(){return this.options.native?this.getNativeInput("end"):this.getCustomInput("end")}getNativeInput(t){const e=document.createElement("input");e.type="time",e.name=t,e.className="time-plugin-input unit";const i=this.timePicked[t];if(i){const t=`0${i.getHours()}`.slice(-2),n=`0${i.getMinutes()}`.slice(-2);e.value=`${t}:${n}`}return e}getCustomInput(t){const e=document.createElement("div");e.className="time-plugin-custom-block";const i=document.createElement("select");i.className="time-plugin-custom-input unit",i.name=`${t}[HH]`;const n=this.options.format12?1:0,s=this.options.format12?13:24;let o=null;!this.picker.options.autoApply&&this.timePrePicked[t]instanceof Date?o=this.timePrePicked[t].clone():this.timePicked[t]instanceof Date&&(o=this.timePicked[t].clone());for(let t=n;t<s;t+=this.options.stepHours){const e=document.createElement("option");if(e.value=String(t),e.text=String(t),o)if(this.options.format12){(o.getHours()%12?o.getHours()%12:12)===t&&(e.selected=!0)}else o.getHours()===t&&(e.selected=!0);i.appendChild(e)}e.appendChild(i);const a=document.createElement("select");a.className="time-plugin-custom-input unit",a.name=`${t}[mm]`;for(let t=0;t<60;t+=this.options.stepMinutes){const e=document.createElement("option");e.value=`0${String(t)}`.slice(-2),e.text=`0${String(t)}`.slice(-2),o&&o.getMinutes()===t&&(e.selected=!0),a.appendChild(e)}if(e.appendChild(a),this.options.seconds){const i=document.createElement("select");i.className="time-plugin-custom-input unit",i.name=`${t}[ss]`;const n=60;for(let t=0;t<n;t+=this.options.stepSeconds){const e=document.createElement("option");e.value=`0${String(t)}`.slice(-2),e.text=`0${String(t)}`.slice(-2),o&&o.getSeconds()===t&&(e.selected=!0),i.appendChild(e)}e.appendChild(i)}if(this.options.format12){const i=document.createElement("select");i.className="time-plugin-custom-input unit",i.name=`${t}[period]`,["AM","PM"].forEach((t=>{const e=document.createElement("option");e.value=t,e.text=t,o&&"PM"===t&&o.getHours()>=12&&(e.selected=!0),i.appendChild(e)})),e.appendChild(i)}return e}handleFormat12(t,e,i){const n=e.clone();switch(t){case"AM":12===i?n.setHours(0,n.getMinutes(),n.getSeconds(),0):n.setHours(i,n.getMinutes(),n.getSeconds(),0);break;case"PM":12!==i?n.setHours(i+12,n.getMinutes(),n.getSeconds(),0):n.setHours(i,n.getMinutes(),n.getSeconds(),0)}return n}parseValues(){if(this.rangePlugin){if(this.rangePlugin.options.strict){if(this.rangePlugin.options.startDate&&this.rangePlugin.options.endDate){const e=new t(this.rangePlugin.options.startDate,this.picker.options.format),i=new t(this.rangePlugin.options.endDate,this.picker.options.format);this.timePicked.start=e.clone(),this.timePicked.end=i.clone()}}else{if(this.rangePlugin.options.startDate){const e=new t(this.rangePlugin.options.startDate,this.picker.options.format);this.timePicked.start=e.clone()}if(this.rangePlugin.options.endDate){const e=new t(this.rangePlugin.options.endDate,this.picker.options.format);this.timePicked.end=e.clone()}}if(this.rangePlugin.options.elementEnd)if(this.rangePlugin.options.strict){if(this.picker.options.element instanceof HTMLInputElement&&this.picker.options.element.value.length&&this.rangePlugin.options.elementEnd instanceof HTMLInputElement&&this.rangePlugin.options.elementEnd.value.length){const e=new t(this.picker.options.element.value,this.picker.options.format),i=new t(this.rangePlugin.options.elementEnd.value,this.picker.options.format);this.timePicked.start=e.clone(),this.timePicked.end=i.clone()}}else{if(this.picker.options.element instanceof HTMLInputElement&&this.picker.options.element.value.length){const e=new t(this.picker.options.element.value,this.picker.options.format);this.timePicked.start=e.clone()}if(this.rangePlugin.options.elementEnd instanceof HTMLInputElement&&this.rangePlugin.options.elementEnd.value.length){const e=new t(this.rangePlugin.options.elementEnd.value,this.picker.options.format);this.timePicked.start=e.clone()}}else if(this.picker.options.element instanceof HTMLInputElement&&this.picker.options.element.value.length){const[e,i]=this.picker.options.element.value.split(this.rangePlugin.options.delimiter);if(this.rangePlugin.options.strict){if(e&&i){const n=new t(e,this.picker.options.format),s=new t(i,this.picker.options.format);this.timePicked.start=n.clone(),this.timePicked.end=s.clone()}}else{if(e){const i=new t(e,this.picker.options.format);this.timePicked.start=i.clone()}if(i){const e=new t(i,this.picker.options.format);this.timePicked.start=e.clone()}}}}else{if(this.picker.options.date){const e=new t(this.picker.options.date,this.picker.options.format);this.timePicked.input=e.clone()}if(this.picker.options.element instanceof HTMLInputElement&&this.picker.options.element.value.length){const e=new t(this.picker.options.element.value,this.picker.options.format);this.timePicked.input=e.clone()}}}}export{i as TimePlugin};

dist/index.umd.js

 /**
 * @license
 * Package: @easepick/time-plugin
-* Version: 1.0.1
+* Version: 1.0.2-beta.0
 * https://easepick.com/
@@ -10,2 +10,2 @@ * Copyright 2022 Rinat G.
 */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@easepick/datetime"),require("@easepick/base-plugin")):"function"==typeof define&&define.amd?define(["exports","@easepick/datetime","@easepick/base-plugin"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).easepick=e.easepick||{},e.easepick,e.easepick)}(this,(function(e,t,i){"use strict";class n extends i.BasePlugin{options={native:!1,format:"HH:mm",append:"start",seconds:!1,stepHours:1,stepMinutes:5,stepSeconds:5,format12:!1};rangePlugin;timePicked={input:null,start:null,end:null};binds={getDate:this.getDate.bind(this),getStartDate:this.getStartDate.bind(this),getEndDate:this.getEndDate.bind(this),onView:this.onView.bind(this),onInput:this.onInput.bind(this),onChange:this.onChange.bind(this),onSelect:this.onSelect.bind(this)};getName(){return"TimePlugin"}onAttach(){this.binds._getDate=this.picker.getDate,this.binds._getStartDate=this.picker.getStartDate,this.binds._getEndDate=this.picker.getEndDate,Object.defineProperties(this.picker,{getDate:{configurable:!0,value:this.binds.getDate},getStartDate:{configurable:!0,value:this.binds.getStartDate},getEndDate:{configurable:!0,value:this.binds.getEndDate}}),this.picker.on("view",this.binds.onView),this.picker.on("input",this.binds.onInput),this.picker.on("change",this.binds.onChange),this.picker.on("select",this.binds.onSelect)}onDetach(){Object.defineProperties(this.picker,{getDate:{configurable:!0,value:this.binds._getDate},getStartDate:{configurable:!0,value:this.binds._getStartDate},getEndDate:{configurable:!0,value:this.binds._getEndDate}}),this.picker.off("view",this.binds.onView),this.picker.off("input",this.binds.onInput),this.picker.off("change",this.binds.onChange),this.picker.off("select",this.binds.onSelect)}getDate(){if(this.picker.options.date instanceof Date){const e=new t.DateTime(this.picker.options.date);if(this.timePicked.input){const t=this.timePicked.input;e.setHours(t.getHours(),t.getMinutes(),t.getSeconds(),0)}return e}return null}getStartDate(){if(this.rangePlugin.options.startDate instanceof Date){const e=new t.DateTime(this.rangePlugin.options.startDate);if(this.timePicked.start){const t=this.timePicked.start;e.setHours(t.getHours(),t.getMinutes(),t.getSeconds(),0)}return e}return null}getEndDate(){if(this.rangePlugin.options.endDate instanceof Date){const e=new t.DateTime(this.rangePlugin.options.endDate);if(this.timePicked.end){const t=this.timePicked.end;e.setHours(t.getHours(),t.getMinutes(),t.getSeconds(),0)}return e}return null}onView(e){const{view:t,target:i}=e.detail;if("Main"===t){this.rangePlugin=this.picker.PluginManager.getInstance("RangePlugin");const e=document.createElement("div");if(e.className="time-plugin-container",this.rangePlugin){const t=this.getStartInput();e.appendChild(t),this.picker.trigger("view",{view:"TimePluginInput",target:t});const i=this.getEndInput();e.appendChild(i),this.picker.trigger("view",{view:"TimePluginInput",target:i})}else{const t=this.getSingleInput();e.appendChild(t),this.picker.trigger("view",{view:"TimePluginInput",target:t})}i.appendChild(e),this.picker.trigger("view",{view:"TimePluginContainer",target:e})}}onInput(e){const i=e.target;if(i instanceof HTMLInputElement&&i.classList.contains("time-plugin-input")){const e=this.timePicked[i.name]||new t.DateTime,[n,s]=i.value.split(":");e.setHours(Number(n)||0,Number(s)||0,0,0),this.timePicked[i.name]=e}}onChange(e){const i=e.target;if(i instanceof HTMLSelectElement&&i.classList.contains("time-plugin-custom-input")){const e=/(\w+)\[(\w+)\]/,[,n,s]=i.name.match(e),o=Number(i.value),a=this.timePicked[n]||new t.DateTime;switch(s){case"HH":if(this.options.format12){const e=i.closest(".time-plugin-custom-block").querySelector(`select[name="${n}[period]"]`).value,t=this.handleFormat12(e,a,o);a.setHours(t.getHours(),t.getMinutes(),t.getSeconds(),0)}else a.setHours(o,a.getMinutes(),a.getSeconds(),0);break;case"mm":a.setHours(a.getHours(),o,a.getSeconds(),0);break;case"ss":a.setHours(a.getHours(),a.getMinutes(),o,0);break;case"period":if(this.options.format12){const e=i.closest(".time-plugin-custom-block").querySelector(`select[name="${n}[HH]"]`).value,t=this.handleFormat12(i.value,a,Number(e));a.setHours(t.getHours(),t.getMinutes(),t.getSeconds(),0)}}this.timePicked[n]=a}}onSelect(e){const{date:t,start:i,end:n}=e.detail,s=this.picker.options,o=s.element,a=this.picker.PluginManager.getInstance("RangePlugin");if(a){const e=this.formatDateTime(i),t=this.formatDateTime(n);if(a.options.elementEnd){const i=s.RangePlugin.elementEnd;o.value=e,i.value=t}else o instanceof HTMLInputElement?o.value=`${e}${a.options.delimiter}${t}`:o instanceof HTMLElement&&(o.innerText=`${e}${a.options.delimiter}${t}`)}else{const e=this.formatDateTime(t);o instanceof HTMLInputElement?o.value=e:o instanceof HTMLElement&&(o.innerText=e)}}formatDateTime(e){if(!e)return"";const t=[],i=this.picker.options;return this.options.format12?(t.push(e.toJSDate().toLocaleString("en-US",{hour:"numeric",minute:"numeric",hour12:!0})),t.push(e.format(i.format))):(t.push(e.format(this.options.format)),t.push(e.format(i.format))),"end"===this.options.append?t.reverse().join(" "):t.join(" ")}getSingleInput(){return this.options.native?this.getNativeInput("input"):this.getCustomInput("input")}getStartInput(){return this.options.native?this.getNativeInput("start"):this.getCustomInput("start")}getEndInput(){return this.options.native?this.getNativeInput("end"):this.getCustomInput("end")}getNativeInput(e){const t=document.createElement("input");t.type="time",t.name=e,t.className="time-plugin-input unit";const i=this.timePicked[e];if(i){const e=`0${i.getHours()}`.slice(-2),n=`0${i.getMinutes()}`.slice(-2);t.value=`${e}:${n}`}return t}getCustomInput(e){const t=document.createElement("div");t.className="time-plugin-custom-block";const i=document.createElement("select");i.className="time-plugin-custom-input unit",i.name=`${e}[HH]`;const n=this.options.format12?1:0,s=this.options.format12?13:24,o=this.timePicked[e];for(let e=n;e<s;e+=this.options.stepHours){const t=document.createElement("option");if(t.value=String(e),t.text=String(e),o)if(this.options.format12){(o.getHours()%12?o.getHours()%12:12)===e&&(t.selected=!0)}else o.getHours()===e&&(t.selected=!0);i.appendChild(t)}t.appendChild(i);const a=document.createElement("select");a.className="time-plugin-custom-input unit",a.name=`${e}[mm]`;for(let e=0;e<60;e+=this.options.stepMinutes){const t=document.createElement("option");t.value=`0${String(e)}`.slice(-2),t.text=`0${String(e)}`.slice(-2),o&&o.getMinutes()===e&&(t.selected=!0),a.appendChild(t)}if(t.appendChild(a),this.options.seconds){const i=document.createElement("select");i.className="time-plugin-custom-input unit",i.name=`${e}[ss]`;const n=60;for(let e=0;e<n;e+=this.options.stepSeconds){const t=document.createElement("option");t.value=`0${String(e)}`.slice(-2),t.text=`0${String(e)}`.slice(-2),o&&o.getSeconds()===e&&(t.selected=!0),i.appendChild(t)}t.appendChild(i)}if(this.options.format12){const i=document.createElement("select");i.className="time-plugin-custom-input unit",i.name=`${e}[period]`,["AM","PM"].forEach((e=>{const t=document.createElement("option");t.value=e,t.text=e,o&&"PM"===e&&o.getHours()>=12&&(t.selected=!0),i.appendChild(t)})),t.appendChild(i)}return t}handleFormat12(e,t,i){const n=t.clone();switch(e){case"AM":12===i?n.setHours(0,n.getMinutes(),n.getSeconds(),0):n.setHours(i,n.getMinutes(),n.getSeconds(),0);break;case"PM":12!==i?n.setHours(i+12,n.getMinutes(),n.getSeconds(),0):n.setHours(i,n.getMinutes(),n.getSeconds(),0)}return n}}e.TimePlugin=n,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@easepick/datetime"),require("@easepick/base-plugin")):"function"==typeof define&&define.amd?define(["exports","@easepick/datetime","@easepick/base-plugin"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).easepick=e.easepick||{},e.easepick,e.easepick)}(this,(function(e,t,i){"use strict";class n extends i.BasePlugin{options={native:!1,seconds:!1,stepHours:1,stepMinutes:5,stepSeconds:5,format12:!1};rangePlugin;timePicked={input:null,start:null,end:null};timePrePicked={input:null,start:null,end:null};binds={getDate:this.getDate.bind(this),getStartDate:this.getStartDate.bind(this),getEndDate:this.getEndDate.bind(this),onView:this.onView.bind(this),onInput:this.onInput.bind(this),onChange:this.onChange.bind(this),onClick:this.onClick.bind(this),setTime:this.setTime.bind(this),setStartTime:this.setStartTime.bind(this),setEndTime:this.setEndTime.bind(this)};getName(){return"TimePlugin"}onAttach(){this.binds._getDate=this.picker.getDate,this.binds._getStartDate=this.picker.getStartDate,this.binds._getEndDate=this.picker.getEndDate,Object.defineProperties(this.picker,{getDate:{configurable:!0,value:this.binds.getDate},getStartDate:{configurable:!0,value:this.binds.getStartDate},getEndDate:{configurable:!0,value:this.binds.getEndDate},setTime:{configurable:!0,value:this.binds.setTime},setStartTime:{configurable:!0,value:this.binds.setStartTime},setEndTime:{configurable:!0,value:this.binds.setEndTime}}),this.rangePlugin=this.picker.PluginManager.getInstance("RangePlugin"),this.parseValues(),this.picker.on("view",this.binds.onView),this.picker.on("input",this.binds.onInput),this.picker.on("change",this.binds.onChange),this.picker.on("click",this.binds.onClick)}onDetach(){delete this.picker.setTime,delete this.picker.setStartTime,delete this.picker.setEndTime,Object.defineProperties(this.picker,{getDate:{configurable:!0,value:this.binds._getDate},getStartDate:{configurable:!0,value:this.binds._getStartDate},getEndDate:{configurable:!0,value:this.binds._getEndDate}}),this.picker.off("view",this.binds.onView),this.picker.off("input",this.binds.onInput),this.picker.off("change",this.binds.onChange),this.picker.off("click",this.binds.onClick)}onView(e){const{view:t,target:i}=e.detail;if("Main"===t){this.rangePlugin=this.picker.PluginManager.getInstance("RangePlugin");const e=document.createElement("div");if(e.className="time-plugin-container",this.rangePlugin){const t=this.getStartInput();e.appendChild(t),this.picker.trigger("view",{view:"TimePluginInput",target:t});const i=this.getEndInput();e.appendChild(i),this.picker.trigger("view",{view:"TimePluginInput",target:i})}else{const t=this.getSingleInput();e.appendChild(t),this.picker.trigger("view",{view:"TimePluginInput",target:t})}i.appendChild(e),this.picker.trigger("view",{view:"TimePluginContainer",target:e})}}onInput(e){const i=e.target;if(i instanceof HTMLInputElement&&i.classList.contains("time-plugin-input")){const e=this.timePicked[i.name]||new t.DateTime,[n,s]=i.value.split(":");e.setHours(Number(n)||0,Number(s)||0,0,0),this.picker.options.autoApply?(this.timePicked[i.name]=e,this.picker.updateValues()):this.timePrePicked[i.name]=e}}onChange(e){const i=e.target;if(i instanceof HTMLSelectElement&&i.classList.contains("time-plugin-custom-input")){const e=/(\w+)\[(\w+)\]/,[,n,s]=i.name.match(e),o=Number(i.value);let a=new t.DateTime;switch(!this.picker.options.autoApply&&this.timePrePicked[n]instanceof Date?a=this.timePrePicked[n].clone():this.timePicked[n]instanceof Date&&(a=this.timePicked[n].clone()),s){case"HH":if(this.options.format12){const e=i.closest(".time-plugin-custom-block").querySelector(`select[name="${n}[period]"]`).value,t=this.handleFormat12(e,a,o);a.setHours(t.getHours(),t.getMinutes(),t.getSeconds(),0)}else a.setHours(o,a.getMinutes(),a.getSeconds(),0);break;case"mm":a.setHours(a.getHours(),o,a.getSeconds(),0);break;case"ss":a.setHours(a.getHours(),a.getMinutes(),o,0);break;case"period":if(this.options.format12){const e=i.closest(".time-plugin-custom-block").querySelector(`select[name="${n}[HH]"]`).value,t=this.handleFormat12(i.value,a,Number(e));a.setHours(t.getHours(),t.getMinutes(),t.getSeconds(),0)}}this.picker.options.autoApply?(this.timePicked[n]=a,this.picker.updateValues()):this.timePrePicked[n]=a}}onClick(e){const t=e.target;if(t instanceof HTMLElement){const e=t.closest(".unit");if(!(e instanceof HTMLElement))return;this.picker.isApplyButton(e)&&(Object.keys(this.timePicked).forEach((e=>{this.timePrePicked[e]instanceof Date&&(this.timePicked[e]=this.timePrePicked[e].clone())})),this.picker.updateValues(),this.timePrePicked={input:null,start:null,end:null}),this.picker.isCancelButton(e)&&(this.timePrePicked={input:null,start:null,end:null},this.picker.renderAll())}}setTime(e){const t=this.handleTimeString(e);this.timePicked.input=t.clone(),this.picker.renderAll(),this.picker.updateValues()}setStartTime(e){const t=this.handleTimeString(e);this.timePicked.start=t.clone(),this.picker.renderAll(),this.picker.updateValues()}setEndTime(e){const t=this.handleTimeString(e);this.timePicked.end=t.clone(),this.picker.renderAll(),this.picker.updateValues()}handleTimeString(e){const i=new t.DateTime,[n,s,o]=e.split(":").map((e=>Number(e))),a=n&&!Number.isNaN(n)?n:0,c=s&&!Number.isNaN(s)?s:0,r=o&&!Number.isNaN(o)?o:0;return i.setHours(a,c,r,0),i}getDate(){if(this.picker.options.date instanceof Date){const e=new t.DateTime(this.picker.options.date,this.picker.options.format);if(this.timePicked.input instanceof Date){const t=this.timePicked.input;e.setHours(t.getHours(),t.getMinutes(),t.getSeconds(),0)}return e}return null}getStartDate(){if(this.rangePlugin.options.startDate instanceof Date){const e=new t.DateTime(this.rangePlugin.options.startDate,this.picker.options.format);if(this.timePicked.start instanceof Date){const t=this.timePicked.start;e.setHours(t.getHours(),t.getMinutes(),t.getSeconds(),0)}return e}return null}getEndDate(){if(this.rangePlugin.options.endDate instanceof Date){const e=new t.DateTime(this.rangePlugin.options.endDate,this.picker.options.format);if(this.timePicked.end instanceof Date){const t=this.timePicked.end;e.setHours(t.getHours(),t.getMinutes(),t.getSeconds(),0)}return e}return null}getSingleInput(){return this.options.native?this.getNativeInput("input"):this.getCustomInput("input")}getStartInput(){return this.options.native?this.getNativeInput("start"):this.getCustomInput("start")}getEndInput(){return this.options.native?this.getNativeInput("end"):this.getCustomInput("end")}getNativeInput(e){const t=document.createElement("input");t.type="time",t.name=e,t.className="time-plugin-input unit";const i=this.timePicked[e];if(i){const e=`0${i.getHours()}`.slice(-2),n=`0${i.getMinutes()}`.slice(-2);t.value=`${e}:${n}`}return t}getCustomInput(e){const t=document.createElement("div");t.className="time-plugin-custom-block";const i=document.createElement("select");i.className="time-plugin-custom-input unit",i.name=`${e}[HH]`;const n=this.options.format12?1:0,s=this.options.format12?13:24;let o=null;!this.picker.options.autoApply&&this.timePrePicked[e]instanceof Date?o=this.timePrePicked[e].clone():this.timePicked[e]instanceof Date&&(o=this.timePicked[e].clone());for(let e=n;e<s;e+=this.options.stepHours){const t=document.createElement("option");if(t.value=String(e),t.text=String(e),o)if(this.options.format12){(o.getHours()%12?o.getHours()%12:12)===e&&(t.selected=!0)}else o.getHours()===e&&(t.selected=!0);i.appendChild(t)}t.appendChild(i);const a=document.createElement("select");a.className="time-plugin-custom-input unit",a.name=`${e}[mm]`;for(let e=0;e<60;e+=this.options.stepMinutes){const t=document.createElement("option");t.value=`0${String(e)}`.slice(-2),t.text=`0${String(e)}`.slice(-2),o&&o.getMinutes()===e&&(t.selected=!0),a.appendChild(t)}if(t.appendChild(a),this.options.seconds){const i=document.createElement("select");i.className="time-plugin-custom-input unit",i.name=`${e}[ss]`;const n=60;for(let e=0;e<n;e+=this.options.stepSeconds){const t=document.createElement("option");t.value=`0${String(e)}`.slice(-2),t.text=`0${String(e)}`.slice(-2),o&&o.getSeconds()===e&&(t.selected=!0),i.appendChild(t)}t.appendChild(i)}if(this.options.format12){const i=document.createElement("select");i.className="time-plugin-custom-input unit",i.name=`${e}[period]`,["AM","PM"].forEach((e=>{const t=document.createElement("option");t.value=e,t.text=e,o&&"PM"===e&&o.getHours()>=12&&(t.selected=!0),i.appendChild(t)})),t.appendChild(i)}return t}handleFormat12(e,t,i){const n=t.clone();switch(e){case"AM":12===i?n.setHours(0,n.getMinutes(),n.getSeconds(),0):n.setHours(i,n.getMinutes(),n.getSeconds(),0);break;case"PM":12!==i?n.setHours(i+12,n.getMinutes(),n.getSeconds(),0):n.setHours(i,n.getMinutes(),n.getSeconds(),0)}return n}parseValues(){if(this.rangePlugin){if(this.rangePlugin.options.strict){if(this.rangePlugin.options.startDate&&this.rangePlugin.options.endDate){const e=new t.DateTime(this.rangePlugin.options.startDate,this.picker.options.format),i=new t.DateTime(this.rangePlugin.options.endDate,this.picker.options.format);this.timePicked.start=e.clone(),this.timePicked.end=i.clone()}}else{if(this.rangePlugin.options.startDate){const e=new t.DateTime(this.rangePlugin.options.startDate,this.picker.options.format);this.timePicked.start=e.clone()}if(this.rangePlugin.options.endDate){const e=new t.DateTime(this.rangePlugin.options.endDate,this.picker.options.format);this.timePicked.end=e.clone()}}if(this.rangePlugin.options.elementEnd)if(this.rangePlugin.options.strict){if(this.picker.options.element instanceof HTMLInputElement&&this.picker.options.element.value.length&&this.rangePlugin.options.elementEnd instanceof HTMLInputElement&&this.rangePlugin.options.elementEnd.value.length){const e=new t.DateTime(this.picker.options.element.value,this.picker.options.format),i=new t.DateTime(this.rangePlugin.options.elementEnd.value,this.picker.options.format);this.timePicked.start=e.clone(),this.timePicked.end=i.clone()}}else{if(this.picker.options.element instanceof HTMLInputElement&&this.picker.options.element.value.length){const e=new t.DateTime(this.picker.options.element.value,this.picker.options.format);this.timePicked.start=e.clone()}if(this.rangePlugin.options.elementEnd instanceof HTMLInputElement&&this.rangePlugin.options.elementEnd.value.length){const e=new t.DateTime(this.rangePlugin.options.elementEnd.value,this.picker.options.format);this.timePicked.start=e.clone()}}else if(this.picker.options.element instanceof HTMLInputElement&&this.picker.options.element.value.length){const[e,i]=this.picker.options.element.value.split(this.rangePlugin.options.delimiter);if(this.rangePlugin.options.strict){if(e&&i){const n=new t.DateTime(e,this.picker.options.format),s=new t.DateTime(i,this.picker.options.format);this.timePicked.start=n.clone(),this.timePicked.end=s.clone()}}else{if(e){const i=new t.DateTime(e,this.picker.options.format);this.timePicked.start=i.clone()}if(i){const e=new t.DateTime(i,this.picker.options.format);this.timePicked.start=e.clone()}}}}else{if(this.picker.options.date){const e=new t.DateTime(this.picker.options.date,this.picker.options.format);this.timePicked.input=e.clone()}if(this.picker.options.element instanceof HTMLInputElement&&this.picker.options.element.value.length){const e=new t.DateTime(this.picker.options.element.value,this.picker.options.format);this.timePicked.input=e.clone()}}}}e.TimePlugin=n,Object.defineProperty(e,"__esModule",{value:!0})}));

dist/interface.d.ts

@@ -5,4 +5,2 @@ import { DateTime } from '@easepick/datetime';
     native?: boolean;
-    format?: string;
-    append?: string;
     seconds?: boolean;
@@ -16,4 +14,8 @@ stepHours?: number;
     interface Core {
+        getDate(): DateTime;
         getStartDate(): DateTime;
         getEndDate(): DateTime;
+        setTime(value: string): void;
+        setStartTime(value: string): void;
+        setEndTime(value: string): void;
     }
@@ -20,0 +22,0 @@ }

package.json

 {
   "name": "@easepick/time-plugin",
   "description": "Plugin for easepick.",
-  "version": "1.0.1",
+  "version": "1.0.2-beta.0",
   "main": "dist/index.umd.js",
@@ -6,0 +6,0 @@ "module": "dist/index.esm.js",

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

28737

increased by39.66%

Lines of code

268

increased by22.94%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes