Getting Started

インストール

flatpickrモジュールをインストール

flatpickrは主にnpmでインストールすることができます。

Bowerの場合はhttps://www.npmjs.com/package/bower-npm-resolverを使用してください。

# npmでインストール
$ npm i flatpickr --save

非モジュール環境

もし何らかの理由でモジュール環境が利用出来ない場合(例えばwebpack)も大丈夫です。 jsdelivrから最新のflatpickrを使うことができます。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

使い方

もしバンドラ(例えばwebpack)を使っている場合、flatpickrをimportする必要があります。

// commonjs
const flatpickr = require("flatpickr");

// 特にTypeScriptの場合は、ES Modulesをおすすめします。
import flatpickr from "flatpickr";

そして、以下の方法でflatpickrのインスタンスを生成できます。

// フレームワークでflatpickrを使う場合は、要素を直接渡すのが良いでしょう。
flatpickr(element, {});

// セレクタもサポートされています。
flatpickr("#myID", {});

// 複数のインスタンスを生成します。
flatpickr(".anotherSelector");

設定は{}(オブジェクト)で渡します。

jQueryの場合

jQueryを利用しているのであれば、プラグインとしてflatpickrを使うことができます。

$(".selector").flatpickr(optional_config);