@easepick/core

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