@gothassos/easepick-amp-plugin

TIP

This package does not need to be installed if you are using @gothassos/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/@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-amp-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-bundle@1.5.0/dist/index.css',
        ],
        plugins: ['AmpPlugin'],
        AmpPlugin: {
          dropdown: {
            months: true,
            years: true,
          },
        },
      });
    </script>
  </body>
</html>

Installation

NPM

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

const picker = new easepick.create({
  element: document.getElementById('datepicker'),
  css: [
    'https://cdn.jsdelivr.net/npm/@gothassos/easepick-bundle@1.5.0/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/@gothassos/easepick-bundle@1.5.0/dist/index.css',
  ],
  plugins: ['AmpPlugin'],
});

Options

Name	Type	Default	Description
dropdown	object		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. months and years can be 'grid': the month or year in the title becomes a button that shows a grid of the months, or of a decade of years, in place of the days. Picking one shows it without changing the date, and the previous / next buttons move a year or a decade while the grid is open. With both set to 'grid', the year in the months grid opens the years grid. LockPlugin's minDate / maxDate lock the months and years out of range, and so do minYear / maxYear in the years grid. Escape goes back to the days. Dropdowns are shown in the core's day view only (viewMode: 'day').
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: '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/></svg>', week: 'Wk', month: 'Month', year: 'Year', resetButtonLabel: 'Clear selection' }	Texts for Amp plugin options. month, year and resetButtonLabel name the dropdowns (or grids) and the reset button for screen readers.