ホームページ >ウェブフロントエンド >jsチュートリアル >JS日時ピッカーの使い方
JS日時ピッカーの使い方
- php中世界最好的语言オリジナル
- 2018-05-02 14:44:401983ブラウズ
今回は、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 サイトの他の関連記事に注目してください。
推奨読書:
webpack で dev-server を使用する手順の詳細な説明
以上がJS日時ピッカーの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。