JS日時ピッカーを実装する

今回は、JS の日付 時刻セレクター を実装する方法について説明します。JS 日付 時刻セレクターを実装する際の 注意事項 について、実際の事例を見てみましょう。

flatpickr は、軽量で無駄のない、UX 主導型の拡張可能な JavaScript 日時ピッカーです。

デモをダウンロード 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 サイトの他の関連記事に注目してください。

推奨読書:

Webpack でスキャフォールディングの最適化を実装する方法

Angular が Dom 使用の誤解を回避する方法

Webpack v4 dev から prd までの詳細な手順

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