プロジェクトで flatpickr を使用する方法

今回はプロジェクトで flatpickr を使用する方法と、プロジェクトで flatpickr を使用する際の注意点について説明します。以下は実際のケースです。

flatpickr はライブラリに依存しません。 UIは小さいですが、テーマはたくさんあります。豊富な API とイベント システムにより、あらゆる環境に適しています。 webpack および jQuery プラグインとして利用できます。

インストール

flatpickr モジュールをインストールします

NPM を使用して flatpickr モジュールをインストールします。パッケージ管理ツール: https://www.npmjs.com/package/bower-npm-resolver

# using npm install
npm i flatpickr --save

非モジュール環境

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 を使用する場合は、 flatpicr をインポートする必要があります。

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

// 如果可用，推荐使用 es 模块
import flatpickr from "flatpickr";

flatpickr インスタンスを作成する有効な方法は次のとおりです。

// 如果在框架中使用 flatpickr ，则建议直接传递该元素
flatpickr(element, {});
// 选择器也被支持
flatpickr("#myID", {});
// 创建多个实例
flatpickr(".anotherSelector");

設定はオプションであり、オブジェクト {} で渡されます。

jQuery

jQueryを使用する場合、プラグインとして flatpickr が利用可能です。

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

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JSへのgetter+setterの追加の概要

webpack+dev+serverの使い方の詳細な説明

以上がプロジェクトで flatpickr を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。