easepick

# @easepick/range-plugin

npm version (opens new window)

TIP

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

Adds the ability to select a range of dates.

# 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>
    <script src="https://cdn.jsdelivr.net/npm/@easepick/base-plugin@[version.number]/dist/index.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@easepick/range-plugin@[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',
          'https://cdn.jsdelivr.net/npm/@easepick/range-plugin@[version.number]/dist/index.css',
        ],
        plugins: ['RangePlugin'],
        RangePlugin: {
          tooltip: true,
        },
      });
    </script>
  </body>
</html>

# Installation

# NPM

npm install @easepick/core @easepick/range-plugin

# 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>
<script src="https://cdn.jsdelivr.net/npm/@easepick/base-plugin@[version.number]/dist/index.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@easepick/range-plugin@[version.number]/dist/index.umd.min.js"></script>

# Usage

If you’re using a bundler, e.g. webpack (opens new window):

import { easepick } from '@easepick/core';
import { RangePlugin } from '@easepick/range-plugin';

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

Another way to initialize easypick:

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

# Options

Name Type Default Description
elementEnd HTMLElement
string		 null Bind the datepicker to a element for end date.
startDate Date
string
number		 null Preselect start date.
Date Object or Unix Timestamp (with milliseconds) or String (must be equal to option format).
endDate Date
string
number		 null Preselect end date.
Date Object or Unix Timestamp (with milliseconds) or String (must be equal to option format).
repick boolean false If date range is already selected, then user can change only one of start date or end date (depends on clicked field) instead of new date range.
strict boolean true Disabling the option allows you to select an incomplete range.
delimiter string ' - ' Delimiter between dates.
tooltip boolean true Showing tooltip with how much days will be selected.
tooltipNumber function Handling the tooltip number.
locale object { one: 'day', other: 'days' } Text for the tooltip.
Keys depends on option lang (see Intl.PluralRules (opens new window)).

# Methods

Name Description
setDateRange Set date range. Should be Date Object or Unix Timestamp (with milliseconds) or String (must be equal to option format).
setStartDate Set start of date range. Should be Date Object or Unix Timestamp (with milliseconds) or String (must be equal to option format).
setEndDate Set end of date range. Should be Date Object or Unix Timestamp (with milliseconds) or String (must be equal to option format).
getStartDate Return current start of date range as DateTime Object.
getEndDate Return current end of date range as DateTime Object.

← @easepick/preset-plugin →