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

推奨読書:

vue+axios本番ログインリクエストインターセプト

webpack-dev-serverの使用法の詳細な説明(コード付き)

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