easepick

# @easepick/core

npm version (opens new window)

TIP

This package does not need to be installed if you are using @easepick/bundle.

Main package of easepick.

# Quick example

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>easepick</title>
    <script src="https://cdn.jsdelivr.net/npm/@easepick/datetime@[version.number]/dist/index.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@easepick/core@[version.number]/dist/index.umd.min.js"></script>
  </head>
  <body>
    <input id="datepicker"/>
    <script>
      const picker = new easepick.create({
        element: document.getElementById('datepicker'),
        css: [
          'https://cdn.jsdelivr.net/npm/@easepick/core@[version.number]/dist/index.css',
        ],
      });
    </script>
  </body>
</html>

# Installation

# NPM

npm install @easepick/core

# CDN

<script src="https://cdn.jsdelivr.net/npm/@easepick/datetime@[version.number]/dist/index.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@easepick/core@[version.number]/dist/index.umd.min.js"></script>

# Usage

If you’re using a bundler, e.g. webpack (opens new window), you’ll need to import easepick.

import { easepick } from '@easepick/core';

Now you can create easepick instance.

const picker = new easepick.create({
  element: document.getElementById('datepicker'),
  css: [
    'https://cdn.jsdelivr.net/npm/@easepick/core@[version.number]/dist/index.css',
  ],
});

# 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() (opens new window) and also affect to plural rules via Intl.PluralRules (opens new window).
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.
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() (opens new window).

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.
clear

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;

← @easepick/amp-plugin →