JS日時ピッカーの使い方

今回は、JS 日付時刻ピッカーの使い方と、JS 日付と時刻ピッカーを使用する際の注意事項について説明します。実際のケースを見てみましょう。

デモをダウンロード GitHub

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

// 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 サイトの他の関連記事に注目してください。

推奨読書:

環境ごとに Vue プロジェクトをパッケージ化する方法

webpack で dev-server を使用する手順の詳細な説明

Vue でのスロット/スコープの使用の詳細な説明

以上がJS日時ピッカーの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。