@gothassos/easepick-lock-plugin

TIP

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

Adds the ability to disable days for selection.

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-lock-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-lock-plugin@1.5.0/dist/index.css',
        ],
        plugins: ['LockPlugin'],
        LockPlugin: {
          minDate: new Date(),
        },
      });
    </script>
  </body>
</html>

Installation

NPM

npm install @gothassos/easepick-core @gothassos/easepick-lock-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-lock-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 { LockPlugin } from '@gothassos/easepick-lock-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-lock-plugin@1.5.0/dist/index.css',
  ],
  plugins: [LockPlugin],
});

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-lock-plugin@1.5.0/dist/index.css',
  ],
  plugins: ['LockPlugin'],
});

Options

Name	Type	Default	Description
minDate	Date string number	null	The minimum/earliest date that can be selected. Date Object or Unix Timestamp (with milliseconds) or ISO String.
maxDate	Date string number	null	The maximum/latest date that can be selected. Date Object or Unix Timestamp (with milliseconds) or ISO String.
minDays	number	null	The minimum days of the selected range.
maxDays	number	null	The maximum days of the selected range.
selectForward	boolean	false	Select second date after the first selected date.
selectBackward	boolean	false	Select second date before the first selected date.
presets	boolean	true	Disable unallowed presets (when PresetPlugin is included).
inseparable	boolean	false	Disable date range selection with locked days.
filter	function	null	Lock days by custom function.

With the core's viewMode: 'month' or 'year', minDate and maxDate lock the months (years) entirely outside them and stop the header arrows there. The other options apply to the day view only.