【お知らせ】
この翻訳ページは下記サイトに移行します。下記リンク先よりご確認ください。
これに伴い当ページの更新を停止します。
[flatpickr - Japanese] - http://tr.you84815.space/flatpickr/
上記サイトは随時更新していきますので、今後とも、宜しくお願い致します。
インストール
モジュール環境
flatpickrはnpm、bower、yarnといったパッケージマネージャからインストールすることで、
常に最新の状態を維持することができます。
# npmでのインストール
npm i flatpickr --save
# bowerの場合
bower install flatpickr-calendar --save
# もしyarnの方が良いなら
yarn add flatpickr
非モジュール環境
パッケージマネージャが利用出来ない場合は、unpkgから取得して使うことが出来ます。
<link rel="stylesheet" href="https://unpkg.com/flatpickr/dist/flatpickr.min.css">
<script src="https://unpkg.com/flatpickr"></script>
使い方
モジュール環境
パッケージをrequireして使うのが良いでしょう。
const flatpickr = require("flatpickr");
そして、以下の方法でflatpickrのインスタンスを生成できます。
flatpickr("#myID", {});
flatpickr(".myClass", {}); // creates multiple instances
flatpickr(element, {}); // https://developer.mozilla.org/en-US/docs/Web/API/Element
設定は{}(オブジェクト)で渡します。
非モジュール環境
上記は非モジュール環境でも同じように使うことができます。
flatpickrのスクリプトを読み込むと、flatpickrが使えるようになります。
ヘルパ関数を使って簡単に呼び出すこともできます。
flatpickr(".mySelector", {});
jQueryの場合
jQueryを利用しているのであれば、プラグインとしてflatpickrを使うことができます。
$(".selector").flatpickr(optional_config);