@gothassos/easepick-range-plugin

TIP

This package does not need to be installed if you are using @gothassos/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/@gothassos/easepick-datetime@1.5.0/dist/index.umd.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@gothassos/easepick-core@1.5.0/dist/index.umd.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@gothassos/easepick-base-plugin@1.5.0/dist/index.umd.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@gothassos/easepick-range-plugin@1.5.0/dist/index.umd.js"></script>
  </head>
  <body>
    <input id="datepicker"/>
    <script>
      const picker = new easepick.create({
        element: document.getElementById('datepicker'),
        css: [
          'https://cdn.jsdelivr.net/npm/@gothassos/easepick-core@1.5.0/dist/index.css',
          'https://cdn.jsdelivr.net/npm/@gothassos/easepick-range-plugin@1.5.0/dist/index.css',
        ],
        plugins: ['RangePlugin'],
        RangePlugin: {
          tooltip: true,
        },
      });
    </script>
  </body>
</html>

Installation

NPM

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

CDN

<script src="https://cdn.jsdelivr.net/npm/@gothassos/easepick-datetime@1.5.0/dist/index.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@gothassos/easepick-core@1.5.0/dist/index.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@gothassos/easepick-base-plugin@1.5.0/dist/index.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@gothassos/easepick-range-plugin@1.5.0/dist/index.umd.js"></script>

Usage

If you’re using a bundler, e.g. webpack:

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

const picker = new easepick.create({
  element: document.getElementById('datepicker'),
  css: [
    'https://cdn.jsdelivr.net/npm/@gothassos/easepick-core@1.5.0/dist/index.css',
    'https://cdn.jsdelivr.net/npm/@gothassos/easepick-range-plugin@1.5.0/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/@gothassos/easepick-core@1.5.0/dist/index.css',
    'https://cdn.jsdelivr.net/npm/@gothassos/easepick-range-plugin@1.5.0/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		Text for the tooltip. Keys depend on option lang (see Intl.PluralRules). A missing form falls back to other, with a console warning.

With the core's viewMode: 'month' or 'year', the range covers whole periods: it starts on the first day of the first month (year) and ends on the last day of the last one, e.g. picking March and June 2026 gives 2026-03-01 – 2026-06-30. Dates passed to the methods below are widened the same way. The tooltip is shown in the day view only.

Methods

Name	Description
setDateRange(start, end)	Set date range. Should be Date Object or Unix Timestamp (with milliseconds) or String (must be equal to option format).
setStartDate(date)	Set start of date range. Should be Date Object or Unix Timestamp (with milliseconds) or String (must be equal to option format).
setEndDate(date)	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.