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