@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;