# @yuafox/easepick2-range-plugin

TIP

This package does not need to be installed if you are using @yuafox/easepick2.

Adds the ability to select a range of dates, months, or years (depending on viewMode).

# Quick example

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>easepick2</title>
    <script src="https://cdn.jsdelivr.net/npm/@yuafox/easepick2-datetime@[version.number]/dist/index.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@yuafox/easepick2-core@[version.number]/dist/index.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@yuafox/easepick2-base-plugin@[version.number]/dist/index.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@yuafox/easepick2-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/@yuafox/easepick2-core@[version.number]/dist/index.css',
          'https://cdn.jsdelivr.net/npm/@yuafox/easepick2-range-plugin@[version.number]/dist/index.css',
        ],
        plugins: ['RangePlugin'],
        RangePlugin: {
          tooltip: true,
        },
      });
    </script>
  </body>
</html>

# Installation

# NPM

npm install @yuafox/easepick2-core @yuafox/easepick2-range-plugin

# CDN

<script src="https://cdn.jsdelivr.net/npm/@yuafox/easepick2-datetime@[version.number]/dist/index.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@yuafox/easepick2-core@[version.number]/dist/index.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@yuafox/easepick2-base-plugin@[version.number]/dist/index.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@yuafox/easepick2-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 '@yuafox/easepick2-core';
import { RangePlugin } from '@yuafox/easepick2-range-plugin';

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

# Month range selection

const picker = new easepick.create({
  element: document.getElementById('datepicker'),
  viewMode: 'month',
  plugins: [RangePlugin],
});

# Year range selection

const picker = new easepick.create({
  element: document.getElementById('datepicker'),
  viewMode: 'year',
  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.
endDate	Date string number	null	Preselect end date.
repick	boolean	false	If date range is already selected, then user can change only one of start date or end date.
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.

# Methods

Name	Description
setDateRange	Set date range.
setStartDate	Set start of date range.
setEndDate	Set end of date range.
getStartDate	Return current start of date range as DateTime Object.
getEndDate	Return current end of date range as DateTime Object.

← @yuafox/easepick2-lock-plugin @yuafox/easepick2-preset-plugin →