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

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

以下もご興味があるかもしれません:
  • Moment プラグインを使用して時間をフォーマットする vue のサンプルコード
  • vue+element を使用した Google プラグインの開発プロセス全体
  • スワイパープラグインを使用して Vue でカルーセルを実装する例
  • VueにExcelテーブルプラグインを導入する方法
  • Vueカスタムディレクティブを使用してドラッグアンドドロッププラグインを構築する方法
  • Vue コード強調プラグインの総合的な比較と評価
  • vue-simple-uploader をベースに、ファイルセグメントアップロード、インスタントアップロード、ブレークポイント再開のグローバルアップロードプラグイン機能をカプセル化します。
  • Vue プラグイン エラー: このページで Vue.js が検出されました。問題は解決しました

<<:  Ubuntu 18.04 に opencv 3.2.0 をインストールするためのソリューション

>>:  SQL効率を分析する方法を説明する

推薦する

Docker で MySQL マスターとスレーブをデプロイする方法

画像をダウンロードMySQLイメージの選択 docker 検索 mysql MySQL 5.7 イメ...

Linux システムに 3 つ以上の Tomcat をインストールする (詳細な手順)

複数のTomcatをインストールする場合は、システムにJDKがインストールされている必要があり、 T...

高性能な HTML アプリケーションを作成するためのヒント

Web ページのパフォーマンスを向上させるにはどうすればよいでしょうか?ほとんどの開発者は、Java...

Vue3カプセル化メッセージメッセージプロンプトインスタンス関数の詳細な説明

目次Vue3 カプセル化メッセージプロンプトインスタンス関数スタイルレイアウトカプセル化メッセージ....

Vueはフィルターを使用して日付をフォーマットします

この記事では、フィルターを使用して日付をフォーマットするVueの具体的なコードを参考までに紹介します...

Sublime TextがUbuntuで中国語を入力できない問題の最も簡単な解決策

崇高なSublime Text はコード エディター (Sublime Text2 は有料ソフトウェ...

Maxwell を使用して MySQL データをリアルタイムで同期する方法

目次マクスウェルについてMaxwellの設定と使用1. Maxwellインストールパッケージをダウン...

画像カルーセルを実装するためのネイティブJS 小さな広告プラグインを実装するためのJS

最近、ネイティブ JS を使用して、さらにいくつかの小さな機能を実装したいと思っています。現在、ブロ...

Vuexの補助関数の使い方

目次マップ状態マップゲッターマップミューテーションマップアクション複数のモジュールマップ状態 ...

JavaScriptは文字の出現回数をカウントします

この記事の例では、文字の出現回数をカウントするJavaScriptの具体的なコードを参考までに共有し...

ネイティブ js を使用してライブ バレット スクリーンのスクロール効果をシミュレートします。

目次1. 基本原則2. 特定のコード要約する1. 基本原則まず、生放送エリアを10の部分に分割し(個...

JavaベースのMySQLバックアップテーブル操作

コアはmysqldumpとランタイムです操作は実際にはそれほど難しくありません。バックアップ操作を実...

初心者向けWebサイト構築ガイド⑥:FlashFXPの詳しい使い方

今日は、サイトの設定やウェブサイトのアップロードなど、FlashFXP の最も基本的な機能を紹介しま...

VMware 仮想マシンのインストール win7 オペレーティング システム チュートリアル ダイアグラム

VMwareaのインストールプロセスは説明しませんが、主にwin7イメージをロードする方法を説明しま...

Centos7 で MySQL マスター スレーブ サーバーを構築する方法 (グラフィック チュートリアル)

この記事では主に CentOS 上で MySQL マスタースレーブサーバーを構築する方法を紹介します...