New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@easepick/time-plugin

Package Overview
Dependencies
Maintainers
1
Versions
22
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@easepick/time-plugin - npm Package Compare versions

Comparing version

1.0.0-beta.5
to
1.0.0

449

dist/index.esm.js

@@ -1,448 +0,1 @@

import { DateTime } from '@easepick/datetime';
import { BasePlugin } from '@easepick/base-plugin';
class TimePlugin extends BasePlugin {
options = {
native: false,
format: 'HH:mm',
append: 'start',
seconds: false,
stepHours: 1,
stepMinutes: 5,
stepSeconds: 5,
format12: false,
};
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),
};
/**
* Returns plugin name
*
* @returns String
*/
getName() {
return 'TimePlugin';
}
/**
* - Called automatically via BasePlugin.attach() -
* The function execute on initialize the picker
*/
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: true,
value: this.binds.getDate
},
getStartDate: {
configurable: true,
value: this.binds.getStartDate
},
getEndDate: {
configurable: true,
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);
}
/**
* - Called automatically via BasePlugin.detach() -
*/
onDetach() {
Object.defineProperties(this.picker, {
getDate: {
configurable: true,
value: this.binds['_getDate']
},
getStartDate: {
configurable: true,
value: this.binds['_getStartDate']
},
getEndDate: {
configurable: true,
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);
}
/**
* Adds time to DateTime object
* Replaces the original `getDate` function
*
* @returns DateTime
*/
getDate() {
if (this.picker.options.date instanceof Date) {
const date = new DateTime(this.picker.options.date);
if (this.timePicked.input) {
const t = this.timePicked.input;
date.setHours(t.getHours(), t.getMinutes(), t.getSeconds(), 0);
}
return date;
}
return null;
}
/**
* Adds time to DateTime object
* Replaces the original `getStartDate` function
*
* @returns DateTime
*/
getStartDate() {
if (this.rangePlugin.options.startDate instanceof Date) {
const date = new DateTime(this.rangePlugin.options.startDate);
if (this.timePicked.start) {
const t = this.timePicked.start;
date.setHours(t.getHours(), t.getMinutes(), t.getSeconds(), 0);
}
return date;
}
return null;
}
/**
* Adds time to DateTime object
* Replaces the original `getEndDate` function
*
* @returns DateTime
*/
getEndDate() {
if (this.rangePlugin.options.endDate instanceof Date) {
const date = new DateTime(this.rangePlugin.options.endDate);
if (this.timePicked.end) {
const t = this.timePicked.end;
date.setHours(t.getHours(), t.getMinutes(), t.getSeconds(), 0);
}
return date;
}
return null;
}
/**
* Function `view` event
* Adds HTML layout of current plugin to the picker layout
*
* @param event
*/
onView(event) {
const { view, target } = event.detail;
if (view === 'Main') {
this.rangePlugin = this.picker.PluginManager.getInstance('RangePlugin');
const container = document.createElement('div');
container.className = 'time-plugin-container';
if (this.rangePlugin) {
const startInput = this.getStartInput();
container.appendChild(startInput);
this.picker.trigger('view', { view: 'TimePluginInput', target: startInput });
const endInput = this.getEndInput();
container.appendChild(endInput);
this.picker.trigger('view', { view: 'TimePluginInput', target: endInput });
}
else {
const singleInput = this.getSingleInput();
container.appendChild(singleInput);
this.picker.trigger('view', { view: 'TimePluginInput', target: singleInput });
}
target.appendChild(container);
this.picker.trigger('view', { view: 'TimePluginContainer', target: container });
}
}
/**
*
* @param event
*/
onInput(event) {
const target = event.target;
if (target instanceof HTMLInputElement && target.classList.contains('time-plugin-input')) {
const date = this.timePicked[target.name] || new DateTime();
const [hours, minutes] = target.value.split(':');
date.setHours(Number(hours) || 0, Number(minutes) || 0, 0, 0);
this.timePicked[target.name] = date;
}
}
/**
* Handle `change` event
*
* @param event
*/
onChange(event) {
const target = event.target;
if (target instanceof HTMLSelectElement && target.classList.contains('time-plugin-custom-input')) {
const r = /(\w+)\[(\w+)\]/;
const [, name, format] = target.name.match(r);
const value = Number(target.value);
const date = this.timePicked[name] || new DateTime();
switch (format) {
case 'HH':
if (this.options.format12) {
const period = target.closest('.time-plugin-custom-block')
.querySelector(`select[name="${name}[period]"]`).value;
const d = this.handleFormat12(period, date, value);
date.setHours(d.getHours(), d.getMinutes(), d.getSeconds(), 0);
}
else {
date.setHours(value, date.getMinutes(), date.getSeconds(), 0);
}
break;
case 'mm':
date.setHours(date.getHours(), value, date.getSeconds(), 0);
break;
case 'ss':
date.setHours(date.getHours(), date.getMinutes(), value, 0);
break;
case 'period':
if (this.options.format12) {
const hours = target.closest('.time-plugin-custom-block')
.querySelector(`select[name="${name}[HH]"]`).value;
const d = this.handleFormat12(target.value, date, Number(hours));
date.setHours(d.getHours(), d.getMinutes(), d.getSeconds(), 0);
}
break;
}
this.timePicked[name] = date;
}
}
/**
* Handle `select` event
*
* @param event
*/
onSelect(event) {
const { date, start, end } = event.detail;
const options = this.picker.options;
const el = options.element;
const rangePlugin = this.picker.PluginManager.getInstance('RangePlugin');
if (rangePlugin) {
const startString = this.formatDateTime(start);
const endString = this.formatDateTime(end);
if (rangePlugin.options.elementEnd) {
const elementEnd = options.RangePlugin.elementEnd;
el.value = startString;
elementEnd.value = endString;
}
else {
if (el instanceof HTMLInputElement) {
el.value = `${startString}${rangePlugin.options.delimiter}${endString}`;
}
else if (el instanceof HTMLElement) {
el.innerText = `${startString}${rangePlugin.options.delimiter}${endString}`;
}
}
}
else {
const dateString = this.formatDateTime(date);
if (el instanceof HTMLInputElement) {
el.value = dateString;
}
else if (el instanceof HTMLElement) {
el.innerText = dateString;
}
}
}
/**
* Returns date and time as string
*
* @param date
* @returns String
*/
formatDateTime(date) {
if (!date)
return '';
const strings = [];
const options = this.picker.options;
if (this.options.format12) {
strings.push(date.toJSDate().toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true }));
strings.push(date.format(options.format));
}
else {
strings.push(date.format(this.options.format));
strings.push(date.format(options.format));
}
switch (this.options.append) {
case 'end':
return strings.reverse().join(' ');
default:
case 'start':
return strings.join(' ');
}
}
/**
*
* @returns HTMLElement
*/
getSingleInput() {
if (this.options.native) {
return this.getNativeInput('input');
}
return this.getCustomInput('input');
}
/**
*
* @returns HTMLElement
*/
getStartInput() {
if (this.options.native) {
return this.getNativeInput('start');
}
return this.getCustomInput('start');
}
/**
*
* @returns HTMLElement
*/
getEndInput() {
if (this.options.native) {
return this.getNativeInput('end');
}
return this.getCustomInput('end');
}
/**
* Returns `input[type="time"]` element
*
* @param name
* @returns HTMLElement
*/
getNativeInput(name) {
const element = document.createElement('input');
element.type = 'time';
element.name = name;
element.className = 'time-plugin-input unit';
const t = this.timePicked[name];
if (t) {
const HH = `0${t.getHours()}`.slice(-2);
const mm = `0${t.getMinutes()}`.slice(-2);
element.value = `${HH}:${mm}`;
}
return element;
}
/**
* Returns `select` element
*
* @param name
* @returns HTMLElement
*/
getCustomInput(name) {
const block = document.createElement('div');
block.className = 'time-plugin-custom-block';
const hSelect = document.createElement('select');
hSelect.className = 'time-plugin-custom-input unit';
hSelect.name = `${name}[HH]`;
const hStart = this.options.format12 ? 1 : 0;
const hLimit = this.options.format12 ? 13 : 24;
const date = this.timePicked[name];
for (let i = hStart; i < hLimit; i += this.options.stepHours) {
const hOption = document.createElement('option');
hOption.value = String(i);
hOption.text = String(i);
if (date) {
if (this.options.format12) {
const hours = date.getHours() % 12 ? date.getHours() % 12 : 12;
if (hours === i) {
hOption.selected = true;
}
}
else if (date.getHours() === i) {
hOption.selected = true;
}
}
hSelect.appendChild(hOption);
}
block.appendChild(hSelect);
const mSelect = document.createElement('select');
mSelect.className = 'time-plugin-custom-input unit';
mSelect.name = `${name}[mm]`;
const mLimit = 60;
for (let i = 0; i < mLimit; i += this.options.stepMinutes) {
const mOption = document.createElement('option');
mOption.value = `0${String(i)}`.slice(-2);
mOption.text = `0${String(i)}`.slice(-2);
if (date && date.getMinutes() === i) {
mOption.selected = true;
}
mSelect.appendChild(mOption);
}
block.appendChild(mSelect);
if (this.options.seconds) {
const sSelect = document.createElement('select');
sSelect.className = 'time-plugin-custom-input unit';
sSelect.name = `${name}[ss]`;
const sLimit = 60;
for (let i = 0; i < sLimit; i += this.options.stepSeconds) {
const sOption = document.createElement('option');
sOption.value = `0${String(i)}`.slice(-2);
sOption.text = `0${String(i)}`.slice(-2);
if (date && date.getSeconds() === i) {
sOption.selected = true;
}
sSelect.appendChild(sOption);
}
block.appendChild(sSelect);
}
if (this.options.format12) {
const pSelect = document.createElement('select');
pSelect.className = 'time-plugin-custom-input unit';
pSelect.name = `${name}[period]`;
['AM', 'PM'].forEach(x => {
const pOption = document.createElement('option');
pOption.value = x;
pOption.text = x;
if (date && x === 'PM' && date.getHours() >= 12) {
pOption.selected = true;
}
pSelect.appendChild(pOption);
});
block.appendChild(pSelect);
}
return block;
}
/**
* Handle 12H time
*
* @param period
* @param date
* @param value
* @returns DateTime
*/
handleFormat12(period, date, value) {
const d = date.clone();
switch (period) {
case 'AM':
if (value === 12) {
d.setHours(0, d.getMinutes(), d.getSeconds(), 0);
}
else {
d.setHours(value, d.getMinutes(), d.getSeconds(), 0);
}
break;
case 'PM':
if (value !== 12) {
d.setHours(value + 12, d.getMinutes(), d.getSeconds(), 0);
}
else {
d.setHours(value, d.getMinutes(), d.getSeconds(), 0);
}
break;
}
return d;
}
}
export { TimePlugin };
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};

458

dist/index.umd.js
/**
* @license
* Package: @easepick/time-plugin
* Version: 1.0.0-beta.4
* Version: 1.0.0-beta.5
* https://easepick.com/

@@ -10,456 +10,2 @@ * Copyright 2022 Rinat G.

*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@easepick/datetime'), require('@easepick/base-plugin')) :
typeof define === 'function' && define.amd ? define(['exports', '@easepick/datetime', '@easepick/base-plugin'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.easepick = global.easepick || {}, global.easepick, global.easepick));
})(this, (function (exports, datetime, basePlugin) { 'use strict';
class TimePlugin extends basePlugin.BasePlugin {
options = {
native: false,
format: 'HH:mm',
append: 'start',
seconds: false,
stepHours: 1,
stepMinutes: 5,
stepSeconds: 5,
format12: false,
};
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),
};
/**
* Returns plugin name
*
* @returns String
*/
getName() {
return 'TimePlugin';
}
/**
* - Called automatically via BasePlugin.attach() -
* The function execute on initialize the picker
*/
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: true,
value: this.binds.getDate
},
getStartDate: {
configurable: true,
value: this.binds.getStartDate
},
getEndDate: {
configurable: true,
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);
}
/**
* - Called automatically via BasePlugin.detach() -
*/
onDetach() {
Object.defineProperties(this.picker, {
getDate: {
configurable: true,
value: this.binds['_getDate']
},
getStartDate: {
configurable: true,
value: this.binds['_getStartDate']
},
getEndDate: {
configurable: true,
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);
}
/**
* Adds time to DateTime object
* Replaces the original `getDate` function
*
* @returns DateTime
*/
getDate() {
if (this.picker.options.date instanceof Date) {
const date = new datetime.DateTime(this.picker.options.date);
if (this.timePicked.input) {
const t = this.timePicked.input;
date.setHours(t.getHours(), t.getMinutes(), t.getSeconds(), 0);
}
return date;
}
return null;
}
/**
* Adds time to DateTime object
* Replaces the original `getStartDate` function
*
* @returns DateTime
*/
getStartDate() {
if (this.rangePlugin.options.startDate instanceof Date) {
const date = new datetime.DateTime(this.rangePlugin.options.startDate);
if (this.timePicked.start) {
const t = this.timePicked.start;
date.setHours(t.getHours(), t.getMinutes(), t.getSeconds(), 0);
}
return date;
}
return null;
}
/**
* Adds time to DateTime object
* Replaces the original `getEndDate` function
*
* @returns DateTime
*/
getEndDate() {
if (this.rangePlugin.options.endDate instanceof Date) {
const date = new datetime.DateTime(this.rangePlugin.options.endDate);
if (this.timePicked.end) {
const t = this.timePicked.end;
date.setHours(t.getHours(), t.getMinutes(), t.getSeconds(), 0);
}
return date;
}
return null;
}
/**
* Function `view` event
* Adds HTML layout of current plugin to the picker layout
*
* @param event
*/
onView(event) {
const { view, target } = event.detail;
if (view === 'Main') {
this.rangePlugin = this.picker.PluginManager.getInstance('RangePlugin');
const container = document.createElement('div');
container.className = 'time-plugin-container';
if (this.rangePlugin) {
const startInput = this.getStartInput();
container.appendChild(startInput);
this.picker.trigger('view', { view: 'TimePluginInput', target: startInput });
const endInput = this.getEndInput();
container.appendChild(endInput);
this.picker.trigger('view', { view: 'TimePluginInput', target: endInput });
}
else {
const singleInput = this.getSingleInput();
container.appendChild(singleInput);
this.picker.trigger('view', { view: 'TimePluginInput', target: singleInput });
}
target.appendChild(container);
this.picker.trigger('view', { view: 'TimePluginContainer', target: container });
}
}
/**
*
* @param event
*/
onInput(event) {
const target = event.target;
if (target instanceof HTMLInputElement && target.classList.contains('time-plugin-input')) {
const date = this.timePicked[target.name] || new datetime.DateTime();
const [hours, minutes] = target.value.split(':');
date.setHours(Number(hours) || 0, Number(minutes) || 0, 0, 0);
this.timePicked[target.name] = date;
}
}
/**
* Handle `change` event
*
* @param event
*/
onChange(event) {
const target = event.target;
if (target instanceof HTMLSelectElement && target.classList.contains('time-plugin-custom-input')) {
const r = /(\w+)\[(\w+)\]/;
const [, name, format] = target.name.match(r);
const value = Number(target.value);
const date = this.timePicked[name] || new datetime.DateTime();
switch (format) {
case 'HH':
if (this.options.format12) {
const period = target.closest('.time-plugin-custom-block')
.querySelector(`select[name="${name}[period]"]`).value;
const d = this.handleFormat12(period, date, value);
date.setHours(d.getHours(), d.getMinutes(), d.getSeconds(), 0);
}
else {
date.setHours(value, date.getMinutes(), date.getSeconds(), 0);
}
break;
case 'mm':
date.setHours(date.getHours(), value, date.getSeconds(), 0);
break;
case 'ss':
date.setHours(date.getHours(), date.getMinutes(), value, 0);
break;
case 'period':
if (this.options.format12) {
const hours = target.closest('.time-plugin-custom-block')
.querySelector(`select[name="${name}[HH]"]`).value;
const d = this.handleFormat12(target.value, date, Number(hours));
date.setHours(d.getHours(), d.getMinutes(), d.getSeconds(), 0);
}
break;
}
this.timePicked[name] = date;
}
}
/**
* Handle `select` event
*
* @param event
*/
onSelect(event) {
const { date, start, end } = event.detail;
const options = this.picker.options;
const el = options.element;
const rangePlugin = this.picker.PluginManager.getInstance('RangePlugin');
if (rangePlugin) {
const startString = this.formatDateTime(start);
const endString = this.formatDateTime(end);
if (rangePlugin.options.elementEnd) {
const elementEnd = options.RangePlugin.elementEnd;
el.value = startString;
elementEnd.value = endString;
}
else {
if (el instanceof HTMLInputElement) {
el.value = `${startString}${rangePlugin.options.delimiter}${endString}`;
}
else if (el instanceof HTMLElement) {
el.innerText = `${startString}${rangePlugin.options.delimiter}${endString}`;
}
}
}
else {
const dateString = this.formatDateTime(date);
if (el instanceof HTMLInputElement) {
el.value = dateString;
}
else if (el instanceof HTMLElement) {
el.innerText = dateString;
}
}
}
/**
* Returns date and time as string
*
* @param date
* @returns String
*/
formatDateTime(date) {
if (!date)
return '';
const strings = [];
const options = this.picker.options;
if (this.options.format12) {
strings.push(date.toJSDate().toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true }));
strings.push(date.format(options.format));
}
else {
strings.push(date.format(this.options.format));
strings.push(date.format(options.format));
}
switch (this.options.append) {
case 'end':
return strings.reverse().join(' ');
default:
case 'start':
return strings.join(' ');
}
}
/**
*
* @returns HTMLElement
*/
getSingleInput() {
if (this.options.native) {
return this.getNativeInput('input');
}
return this.getCustomInput('input');
}
/**
*
* @returns HTMLElement
*/
getStartInput() {
if (this.options.native) {
return this.getNativeInput('start');
}
return this.getCustomInput('start');
}
/**
*
* @returns HTMLElement
*/
getEndInput() {
if (this.options.native) {
return this.getNativeInput('end');
}
return this.getCustomInput('end');
}
/**
* Returns `input[type="time"]` element
*
* @param name
* @returns HTMLElement
*/
getNativeInput(name) {
const element = document.createElement('input');
element.type = 'time';
element.name = name;
element.className = 'time-plugin-input unit';
const t = this.timePicked[name];
if (t) {
const HH = `0${t.getHours()}`.slice(-2);
const mm = `0${t.getMinutes()}`.slice(-2);
element.value = `${HH}:${mm}`;
}
return element;
}
/**
* Returns `select` element
*
* @param name
* @returns HTMLElement
*/
getCustomInput(name) {
const block = document.createElement('div');
block.className = 'time-plugin-custom-block';
const hSelect = document.createElement('select');
hSelect.className = 'time-plugin-custom-input unit';
hSelect.name = `${name}[HH]`;
const hStart = this.options.format12 ? 1 : 0;
const hLimit = this.options.format12 ? 13 : 24;
const date = this.timePicked[name];
for (let i = hStart; i < hLimit; i += this.options.stepHours) {
const hOption = document.createElement('option');
hOption.value = String(i);
hOption.text = String(i);
if (date) {
if (this.options.format12) {
const hours = date.getHours() % 12 ? date.getHours() % 12 : 12;
if (hours === i) {
hOption.selected = true;
}
}
else if (date.getHours() === i) {
hOption.selected = true;
}
}
hSelect.appendChild(hOption);
}
block.appendChild(hSelect);
const mSelect = document.createElement('select');
mSelect.className = 'time-plugin-custom-input unit';
mSelect.name = `${name}[mm]`;
const mLimit = 60;
for (let i = 0; i < mLimit; i += this.options.stepMinutes) {
const mOption = document.createElement('option');
mOption.value = `0${String(i)}`.slice(-2);
mOption.text = `0${String(i)}`.slice(-2);
if (date && date.getMinutes() === i) {
mOption.selected = true;
}
mSelect.appendChild(mOption);
}
block.appendChild(mSelect);
if (this.options.seconds) {
const sSelect = document.createElement('select');
sSelect.className = 'time-plugin-custom-input unit';
sSelect.name = `${name}[ss]`;
const sLimit = 60;
for (let i = 0; i < sLimit; i += this.options.stepSeconds) {
const sOption = document.createElement('option');
sOption.value = `0${String(i)}`.slice(-2);
sOption.text = `0${String(i)}`.slice(-2);
if (date && date.getSeconds() === i) {
sOption.selected = true;
}
sSelect.appendChild(sOption);
}
block.appendChild(sSelect);
}
if (this.options.format12) {
const pSelect = document.createElement('select');
pSelect.className = 'time-plugin-custom-input unit';
pSelect.name = `${name}[period]`;
['AM', 'PM'].forEach(x => {
const pOption = document.createElement('option');
pOption.value = x;
pOption.text = x;
if (date && x === 'PM' && date.getHours() >= 12) {
pOption.selected = true;
}
pSelect.appendChild(pOption);
});
block.appendChild(pSelect);
}
return block;
}
/**
* Handle 12H time
*
* @param period
* @param date
* @param value
* @returns DateTime
*/
handleFormat12(period, date, value) {
const d = date.clone();
switch (period) {
case 'AM':
if (value === 12) {
d.setHours(0, d.getMinutes(), d.getSeconds(), 0);
}
else {
d.setHours(value, d.getMinutes(), d.getSeconds(), 0);
}
break;
case 'PM':
if (value !== 12) {
d.setHours(value + 12, d.getMinutes(), d.getSeconds(), 0);
}
else {
d.setHours(value, d.getMinutes(), d.getSeconds(), 0);
}
break;
}
return d;
}
}
exports.TimePlugin = TimePlugin;
Object.defineProperty(exports, '__esModule', { value: true });
}));
!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})}));

4

package.json
{
"name": "@easepick/time-plugin",
"description": "Plugin for easepick.",
"version": "1.0.0-beta.5",
"version": "1.0.0",
"main": "dist/index.umd.js",

@@ -9,3 +9,3 @@ "module": "dist/index.esm.js",

"dependencies": {
"@easepick/base-plugin": "^1.0.0-beta.0"
"@easepick/base-plugin": "^1.0.0"
},

@@ -12,0 +12,0 @@ "author": {

dist/index.css

Sorry, the diff of this file is not supported yet