JavaScriptのカレンダーライブラリであるeasepickの基本的な使い方

EasepickはJavaScriptのカレンダーライブラリです。

年を跨いだスクロールを実装したかったのですが、使用していたFlatpickerでは難しかったためEasepickに切り替えました。

オプションやプラグインが使いやすかったためこちらで実装方法をご紹介します。

導入
プラグインの導入
まとめ

導入

easepickには一通りのプラグインがセットになっているものと、必要なものを自分で取捨選択して導入する方法があります。

プラグインの種類

セットプラグイン
公式にあるプラグインが一通り入ったパックになります。

@easepick/bundle

ベースプラグイン
必要なものを取捨選択して使用したい場合のベースとなるプラグインです

@easepick/core

@easepick/coreの方はベースとなるプラグインのみなので、そのほか必要な機能があったら都度導入してください。

導入方法

CDNとNPMでの導入方法が紹介されています。

<script src="<https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.umd.min.js>"></script>

$ npm install @easepick/bundle

// your_js_file.js
import { easepick } from '@easepick/bundle';

使用方法

<input id="calendar" type="text">

const picker = new easepick.create({
	element: document.querySelector('#calendar'),
	css: [
		'<https://your.stylesheet.url>',
	],
});

基本は上記の形になります。 element オプションはカレンダーを表示させる基準となる要素です。この要素をクリックすることでその下にカレンダー要素が表示されます。

easepickは作られるカレンダー要素の構造が #shadow-root 以下に作られるので、JSで何か独自の動きをつけたい場合、そのまま document.querySelector などでカレンダー内の要素を取得しようと思ってもできないのでご注意ください。

カレンダー内の要素を取得する必要がある場合は以下のようにしてあげると取得できます。

const easepickWrapper = document.querySelector('.easepick-wrapper');
const shadowRoot = easepickWrapper.shadowRoot;
const targetElement = shadowRoot.querySelector('.your-target-class-name');

プラグインの導入

プラグインは pluginsオプションで指定することができます。

const calendar = new easepick.create({
  element: document.querySelector('#calendar'),
  css: [stylesheetUrl],
  plugins: [
    RangePlugin,
  ],
  RangePlugin: {
    startDate: startDate,
    endDate: endDate,
    delimiter: ' ~ ',
  }
})

pluginsで指定し、その後 pluginName: { options... } で各種設定が可能です。