@gothassos/easepick-core
v1.2.8
Published
The core of easepick.
Downloads
17
Readme
@easepick/core
This package does not need to be installed if you are using @easepick/bundle.
Main package of easepick.
Documentation
https://easepick.com/packages/core
Options
| 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.
Methods
| 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.
Example
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
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.
Example
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
PluginManager
allows you to manage plugins of created picker.
Methods
| 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
// 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;