vue-cli 3 で vue-bootstrap-datetimepicker 日付プラグインを使用する方法

需要背景

最近、Vue を使用してフロントエンド エンジニアリング システムと組み合わせ、以前のデモを再構築する予定です。機能の 1 つは、bootstrap datepicker プラグインを使用してクエリの日付を選択することです。インターネット上で、Vue 拡張機能に基づく日付ピッカー プラグイン vue-bootstrap-datepicker を見つけました。このブログでは主に、vue-cli 3 で作成されたプロジェクトでプラグインを使用する方法を紹介します。プロジェクトアドレス: https://gitlab.com/JiaoXN/vuecli3usedatetimepicker.git

プラグインとその依存関係をインストールする

このプラグインには 2 つのバージョンがあります。1 つは bootstrap 3.x に基づいて開発され、もう 1 つは bootstrap 4.x に基づいて開発されています。このブログでは後者のプラグインのインストールと使い方を紹介します。

まず、bootstrap 4.x、jquery >= 1.8.3、moment.js 2.22、pc-bootstrap4-datetimepicker などのプラグインの依存関係をインストールする必要があります。

• ブートストラップをインストールする

npm インストール [email protected] --save-dev

• jQueryをインストールする

npm をインストール [email protected] --save-dev

• インストールの瞬間

npm インストール [email protected] --save-dev

• pc-bootstrap4-datetimepicker をインストールする

npm インストール [email protected] --save-dev

または、package.json を直接設定し、npm install 経由でインストールします。 package.json の構成は次のとおりです。

...
「devDependencies」: {
	"pc-bootstrap4-datetimepicker": "^4.17.50",
	「瞬間」: 「^2.22.2」、
	"jQuery": "^3.3.1",
	"ブートストラップ": "4.0.0"
}

次にvue-bootstrap-datetimepickerをインストールします。インストール方法は上記の依存関係のインストールと同じです。

プラグインの設定

vue-bootstrap-datetimepicker プラグインのオリジナル版は Bootstrap 3.x をベースに開発されたため、その後 Bootstrap 4.x に適応するように拡張されました (現時点では、pc-bootstrap4-datetimepicker は Bootstrap 4.x 用のパッチと見ることができます)。ただし、このプラグインをそのまま使用すると、デフォルトのアイコン (時間アイコンや日付アイコンのようなもの) が表示されないため、以下の設定が必要です。

上記の問題の原因は、Bootstrap 4.x が glyphicon アイコンを削除するため、まず fortawesome プラグインをインストールする必要があります。インストール方法は次のとおりです。

npm をインストール @fortawesome/[email protected] --save-dev

次に、datetimepicker プラグインを使用する Vue ファイルで次のコード構成を使用します。

<スクリプト>

'@fortawesome/fontawesome-free/css/all.css' をインポートします。

'jquery' から $ をインポートします

エクスポートデフォルト{
	...
	作成: 関数() {
		アイコン:
			時間: 「ファーファクロック」、
	    日付: 'far fa-calendar'、
	    上: 'fas fa-arrow-up'、
	    下: 'fas fa-arrow-down'、
	    前: 'fas fa-chevron-left'、
	    次: 'fas fa-chevron-right'、
	    今日: 'fas fa-calendar-check'、
	    クリア: 'far fa-trash-alt'、
	    閉じる: 'far fa-times-circle'
		}
	}
}

</スクリプト

上記のコードで作成された関数は、Vueライフサイクルのフック関数に属します。

プラグインの使用

関連する依存プラグインをインストールし、プラグインイメージを設定します。その後、このプラグインを使用できます。Vue コード全体は次のとおりです。

<テンプレート>
	<div class="コンテナ">
		<div class="行>
			<div class="col-md-12">
				<日付ピッカー
					v-model="日付"
					:config="オプション"
					@dp-hide="日付選択結果を表示"/>
			</div>
		</div>
	</div>
</テンプレート>

<スクリプト>
'bootstrap/dist/css/bootstrap.css' をインポートします。

'vue-bootstrap-datetimepicker' から datePicker をインポートします。

'pc-bootstrap4-datetimepicker/build/css/bootstrap-datetimepicker.css' をインポートします。

'@fortawesome/fontawesome-free/css/all.css' をインポートします。

'jquery' から $ をインポートします

エクスポートデフォルト{
	名前: 'HelloWorld',
	データ （） {
		戻る {
			日付: 新しい Date(),
			オプション:
				形式: 'YYYY-MM-DD HH:mm:ss',
				useCurrent: false、
				ロケール: 'zh-cn',
				ツールチップ:
				 選択時間: ''
				}
			}
		}
	},
	メソッド: {
		showDatePickResult: 関数 () {
			コンソールログ(この日付)
		}
	},
	コンポーネント:
		日付ピッカー
	},
	作成: 関数 () {
		$.extend(true, $.fn.datetimepicker.defaults, {
	 		アイコン:
	  		時間: 「ファーファクロック」、
	  		日付: 'far fa-calendar'、
	  		上: 'fas fa-arrow-up'、
	  		下: 'fas fa-arrow-down'、
	  		前: 'fas fa-chevron-left'、
	  		次: 'fas fa-chevron-right'、
	  		今日: 'fas fa-calendar-check'、
	  		クリア: 'far fa-trash-alt'、
	  		閉じる: 'far fa-times-circle'
	 		}
		})
	}
}
</スクリプト>

<template></template> 内の内容については詳しく説明する必要はありません。Vue を知っている人なら基本的に知っているでしょう。Vue についてあまり知らない場合は、Vue の公式サイトを確認してください。

データ内のオプションは datetimepicker プラグインの設定です。全体的な設定については、このリンクを参照してください。現在の設定は次のとおりです。

• format: 日付の形式。HH:mm:ss の HH を hh に置き換えると、プラグインは日付を AM と PM で記述することに注意してください。
• ロケール: 使用言語を示します。zh-cn は簡体字中国語を示します。
• ツールチップ: ツールチップの内容を示します。このプラグインにはバグがあります。日付と時刻を選択するためのツールチップは両方とも「時刻を選択」なので、このツールチップは空に設定されています。

上記は、vue-cli 3 で vue-bootstrap-datetimepicker 日付プラグインを使用する方法の詳細です。vue-bootstrap-datetimepicker 日付プラグインの使用方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。