@easepick/core
TypeScript icon, indicating that this package has built-in type declarations

1.2.1 • Public • Published

@easepick/core

npm version

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;

Readme

Keywords

none

Package Sidebar

Install

npm i @easepick/core

Homepage

easepick.com

Weekly Downloads

13,635

Version

1.2.1

License

GPL-2.0-or-later

Unpacked Size

48.6 kB

Total Files

11

Last publish

Collaborators

  • waki