easepick

# @easepick/lock-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 disable days for selection.

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

# Installation

# NPM

npm install @easepick/core @easepick/lock-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/lock-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 { LockPlugin } from '@easepick/lock-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/lock-plugin@[version.number]/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/@easepick/core@[version.number]/dist/index.css',
    'https://cdn.jsdelivr.net/npm/@easepick/lock-plugin@[version.number]/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.
When a date is provided as a string, it must be equal to the format option.
maxDate Date
string
number		 null The maximum/latest date that can be selected.
Date Object or Unix Timestamp (with milliseconds) or ISO String.
When a date is provided as a string, it must be equal to the format option.
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.

← @easepick/range-plugin →