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

php中世界最好的语言
リリース: 2018-04-08 14:50:33
オリジナル
4003 人が閲覧しました

今回は、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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート