@yuafox/easepick2-time-plugin 2.0.0

package/LICENSE.md

@@ -0,0 +1,5 @@
+# Software License Agreement
+
+Licensed under the terms of [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.html). 
+
+Copyright © 2021-2022, [Rinat G.](https://github.com/wakirin)

package/README.md

@@ -0,0 +1,32 @@
+# @easepick/time-plugin
+
+[![npm version](https://badge.fury.io/js/@easepick%2Ftime-plugin.svg)](https://www.npmjs.com/package/@easepick/time-plugin)
+
+> This package does not need to be installed if you are using [@easepick/bundle](https://easepick.com/packages/bundle).
+
+Adds time picker.
+
+
+## Documentation
+
+[https://easepick.com/packages/time-plugin](https://easepick.com/packages/time-plugin)
+
+
+## Options
+
+| Name | Type | Default | Description
+| --- | :---: | :---: | ---
+| seconds | boolean | false | Enable seconds picker.
+| stepHours | number | 1 | Step for hours.
+| stepMinutes | number | 5 | Step for minutes.
+| stepSeconds | number | 5 | Step for seconds.
+| format12 | boolean | false | Display 12H time.
+
+
+## Methods
+
+| Name  | Description
+| --- | ---
+| setTime(value) | Set a time for single date picker.
+| setStartTime(value) | Set start time of date range.
+| setEndTime(value) | Set end time of date range.

package/dist/index.css

@@ -0,0 +1 @@
+.container.preset-plugin main{display:grid}.container.preset-plugin main.preset-left>.calendars,.container.preset-plugin main.preset-top>.calendars{order:2}.container.preset-plugin main.preset-left>.preset-plugin-container,.container.preset-plugin main.preset-top>.preset-plugin-container{order:1}.container.preset-plugin main.preset-left,.container.preset-plugin main.preset-right{grid-template-columns:auto auto}.container.preset-plugin main.preset-left .preset-plugin-container,.container.preset-plugin main.preset-right .preset-plugin-container{grid-row:span 2;width:130px}.container.preset-plugin main.preset-bottom>.preset-plugin-container{order:4}.container.preset-plugin main.preset-bottom,.container.preset-plugin main.preset-top{grid-template-columns:auto}.container.preset-plugin main>.time-plugin-container{order:3}.container>main:not([class*=preset-]){flex-direction:column}.time-plugin-container{background-color:var(--color-bg-secondary);border-bottom:1px solid var(--color-border-default);display:flex;justify-content:space-around;padding:10px}.time-plugin-container input[type=time]{font-size:18px}.time-plugin-container input[type=time],.time-plugin-container select{background-color:var(--color-bg-default);border:1px solid transparent;border-radius:4px;color:var(--color-fg-default)}.time-plugin-container select{margin:0 3px}

package/dist/index.d.ts

@@ -0,0 +1,146 @@
+import { BasePlugin, IPlugin } from '@yuafox/easepick2-base-plugin';
+import { RangePlugin } from '@yuafox/easepick2-range-plugin';
+import { ITimeConfig } from './interface';
+import './index.scss';
+export declare class TimePlugin extends BasePlugin implements IPlugin {
+    options: ITimeConfig;
+    rangePlugin: RangePlugin;
+    timePicked: {
+        input: any;
+        start: any;
+        end: any;
+    };
+    timePrePicked: {
+        input: any;
+        start: any;
+        end: any;
+    };
+    binds: {
+        getDate: any;
+        getStartDate: any;
+        getEndDate: any;
+        onView: any;
+        onInput: any;
+        onChange: any;
+        onClick: any;
+        setTime: any;
+        setStartTime: any;
+        setEndTime: any;
+    };
+    /**
+     * Returns plugin name
+     *
+     * @returns String
+     */
+    getName(): string;
+    /**
+     * - Called automatically via BasePlugin.attach() -
+     * The function execute on initialize the picker
+     */
+    onAttach(): void;
+    /**
+     * - Called automatically via BasePlugin.detach() -
+     */
+    onDetach(): void;
+    /**
+     * Function `view` event
+     * Adds HTML layout of current plugin to the picker layout
+     *
+     * @param event
+     */
+    private onView;
+    /**
+     *
+     * @param event
+     */
+    private onInput;
+    /**
+     * Handle `change` event
+     *
+     * @param event
+     */
+    private onChange;
+    private onClick;
+    /**
+     * Set time programmatically
+     *
+     * @param value
+     * @param keyName
+     */
+    private setTime;
+    /**
+     * Set start time programmatically
+     *
+     * @param value
+     * @param keyName
+     */
+    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
+     */
+    private getSingleInput;
+    /**
+     *
+     * @returns HTMLElement
+     */
+    private getStartInput;
+    /**
+     *
+     * @returns HTMLElement
+     */
+    private getEndInput;
+    /**
+     * Returns `input[type="time"]` element
+     *
+     * @param name
+     * @returns HTMLElement
+     */
+    private getNativeInput;
+    /**
+     * Returns `select` element
+     *
+     * @param name
+     * @returns HTMLElement
+     */
+    private getCustomInput;
+    /**
+     * Handle 12H time
+     *
+     * @param period
+     * @param date
+     * @param value
+     * @returns DateTime
+     */
+    private handleFormat12;
+    private parseValues;
+}

package/dist/index.esm.js

@@ -0,0 +1 @@
+import{DateTime as t}from"@yuafox/easepick2-datetime";import{BasePlugin as e}from"@yuafox/easepick2-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)}}if(this.picker.options.autoApply)this.timePicked[n]=a,this.picker.updateValues();else{this.timePrePicked[n]=a;const t=this.picker.ui.container.querySelector(".apply-button");if(this.rangePlugin){const e=this.rangePlugin.options,i=this.picker.datePicked,n=e.strict&&2===i.length||!e.strict&&i.length>0||!i.length&&e.strict&&e.startDate instanceof Date&&e.endDate instanceof Date||!i.length&&!e.strict&&(e.startDate instanceof Date||e.endDate instanceof Date);t.disabled=!n}else this.picker.datePicked.length&&(t.disabled=!1)}}}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};

package/dist/index.umd.js

@@ -0,0 +1,10 @@
+/**
+* @license
+* Package: @yuafox/easepick2-time-plugin
+* Version: 2.0.0
+* https://github.com/YuaFox/easepick2
+* Copyright 2026 YuaFox
+* 
+* Licensed under the terms of GNU General Public License Version 2 or later. (http://www.gnu.org/licenses/gpl.html)
+*/
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@yuafox/easepick2-datetime"),require("@yuafox/easepick2-base-plugin")):"function"==typeof define&&define.amd?define(["exports","@yuafox/easepick2-datetime","@yuafox/easepick2-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)}}if(this.picker.options.autoApply)this.timePicked[n]=a,this.picker.updateValues();else{this.timePrePicked[n]=a;const e=this.picker.ui.container.querySelector(".apply-button");if(this.rangePlugin){const t=this.rangePlugin.options,i=this.picker.datePicked,n=t.strict&&2===i.length||!t.strict&&i.length>0||!i.length&&t.strict&&t.startDate instanceof Date&&t.endDate instanceof Date||!i.length&&!t.strict&&(t.startDate instanceof Date||t.endDate instanceof Date);e.disabled=!n}else this.picker.datePicked.length&&(e.disabled=!1)}}}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})}));

package/dist/interface.d.ts

@@ -0,0 +1,25 @@
+import { DateTime } from '@yuafox/easepick2-datetime';
+import { IBaseConfig } from '@yuafox/easepick2-base-plugin';
+export interface ITimeConfig extends IBaseConfig {
+    native?: boolean;
+    seconds?: boolean;
+    stepHours?: number;
+    stepMinutes?: number;
+    stepSeconds?: number;
+    format12?: boolean;
+}
+declare module '@yuafox/easepick2-core' {
+    interface Core {
+        getDate(): DateTime;
+        getStartDate(): DateTime;
+        getEndDate(): DateTime;
+        setTime(value: string): void;
+        setStartTime(value: string): void;
+        setEndTime(value: string): void;
+    }
+}
+declare module '@yuafox/easepick2-core/dist/types' {
+    interface IPickerConfig {
+        TimePlugin?: ITimeConfig;
+    }
+}

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@yuafox/easepick2-time-plugin",
+  "description": "Time plugin for easepick2.",
+  "version": "2.0.0",
+  "main": "dist/index.umd.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "@yuafox/easepick2-base-plugin": "^2.0.0"
+  },
+  "author": {
+    "name": "YuaFox"
+  },
+  "license": "GPL-2.0-or-later",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/YuaFox/easepick2.git",
+    "directory": "packages/time-plugin"
+  },
+  "homepage": "https://github.com/YuaFox/easepick2",
+  "bugs": {
+    "url": "https://github.com/YuaFox/easepick2/issues"
+  },
+  "files": [
+    "dist"
+  ]
+}