Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@gothassos/easepick-core
Advanced tools
Readme
This package does not need to be installed if you are using @easepick/bundle.
Main package of easepick.
https://easepick.com/packages/core
Name | Type | Default | Description |
---|---|---|---|
element | HTMLElement string | null | Bind the datepicker to a element. Also is possible to bind to any element (not input) for example you need inline calendar. |
doc | Document ShadowRoot | document | May be required if you need to pass ShadowRoot. |
css | string array function | [] | Pass a CSS file for picker. Don't mix types, if you are using css link then array should only contain links. |
firstDay | number | 1 | Day of start week. (0 - Sunday, 1 - Monday, 2 - Tuesday, etc…) |
lang | string | en-US | Language. This option affect to day names, month names via Date.prototype.toLocaleString() and also affect to plural rules via Intl.PluralRules. |
date | Date string number | null | Preselect date. Date Object or Unix Timestamp (with milliseconds) or String (must be equal to option format). |
format | string | YYYY-MM-DD | The default output format. See tokens format. |
grid | number | 1 | Number of calendar columns. |
calendars | number | 1 | Number of visible months. |
readonly | boolean | true | Add readonly attribute to element . |
autoApply | boolean | true | Hide the apply and cancel buttons, and automatically apply a new date range as soon as two dates are clicked. |
zIndex | number | null | zIndex of picker. |
inline | boolean | false | Show calendar inline. |
scrollToDate | boolean | true | Scroll to the selected date on open. |
header | boolean string HTMLElement | false | Add header to calendar. |
locale | object | { nextMonth: '', previousMonth: '', cancel: 'Cancel', apply: 'Apply' } | Icon and text for buttons. |
documentClick | boolean function | function | Hide picker on click outside picker element. |
setup | function | null | |
plugins | array | [] | List of plugins. |
Name | Description |
---|---|
version | return version of picker. |
isShown() | Determine if the picker is visible or not. |
show() | Show the picker. |
hide() | Hide the picker. |
clear() | Clear the picker selection. |
gotoDate(date) | Change visible month. |
setDate(date) | Set date programmatically. |
getDate() | Get selected date. |
on(type, listener, options) | Add listener to container element. |
off(type, listener, options) | Remove listener from container element. |
trigger(type, detail) | Dispatch an event. |
renderAll() | Redraw the calendar layout. |
destroy() | Destroy the picker. |
const picker = new easepick.create({
element: document.getElementById('datepicker'),
css: [
'https://cdn.jsdelivr.net/npm/@easepick/core@[version.number]/dist/index.css',
],
});
//
picker.setDate('2022-01-01');
Events based on CustomEvent().
Name | Description |
---|---|
render | |
view | |
preselect | Event is called on select days (before submit selection). When autoApply option is false . |
select | Event is called when selection is submitted. |
It is also allowed to use default events such as click
, keydown
, etc.
const picker = new easepick.create({
element: document.getElementById('datepicker'),
css: [
'https://cdn.jsdelivr.net/npm/@easepick/core@[version.number]/dist/index.css',
],
setup(picker) {
picker.on('view', (e) => {
const { view, date, target } = e.detail;
// do something
});
},
});
PluginManager
allows you to manage plugins of created picker.
Name | Description |
---|---|
getInstance(pluginName) | Returns the plugin instance. pluginName is a string (eg.: RangePlugin ). |
addInstance(pluginName) | Adds a plugin to the picker. Returns an instance of the added plugin. |
removeInstance(pluginName) | Removes the plugin from the picker.Returns a boolean result. |
reloadInstance(pluginName) | Removes the plugin from the picker and adds it again. Returns an instance of the added plugin. |
// example use bundle version
const picker = new easepick.create({
element: document.getElementById('datepicker'),
css: [
'https://cdn.jsdelivr.net/npm/@easepick/core@[version.number]/dist/index.css',
],
});
// add AmpPlugin to the picker
const ampPlugin = picker.PluginManager.addInstance('AmpPlugin');
// change plugin option
ampPlugin.options.resetButton = true;
FAQs
The core of easepick.
The npm package @gothassos/easepick-core receives a total of 7 weekly downloads. As such, @gothassos/easepick-core popularity was classified as not popular.
We found that @gothassos/easepick-core demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.