easepick

# @easepick/amp-plugin

npm version (opens new window)

TIP

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

Adds extra options.

# 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/amp-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/bundle@[version.number]/dist/index.css',
        ],
        plugins: ['AmpPlugin'],
        AmpPlugin: {
          dropdown: {
            months: true,
            years: true,
          },
        },
      });
    </script>
  </body>
</html>

# Installation

# NPM

npm install @easepick/core @easepick/amp-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/amp-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 { AmpPlugin } from '@easepick/amp-plugin';

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

Another way to initialize easypick:

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

# Options

Name Type Default Description
dropdown object { minYear: 1950, maxYear: null, months: false, years: false } Enable dropdowns for months, years. If maxYear is null then maxYear will be equal to (new Date()).getFullYear().
years can be equal to asc string to change the sort direction.
resetButton boolean
function		 false Adds a reset button to clear the current selection. It is allowed to pass a custom function that must return true to clear the selection.
darkMode boolean true Allows dark mode to be used if the user's system settings are set to dark mode.
weekNumbers boolean false Show week numbers.
locale object { resetButton: '' } Texts for Amp plugin options.

← @easepick/kbd-plugin →