@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
``js
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
`js
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

`js
// 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;
``