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効率を分析する方法を説明する

推薦する

Windows での MySQL 8.0.18 インストール チュートリアル (図解)

ダウンロードダウンロードアドレス: https://dev.mysql.com/downloads/...

MySQL で CURRENT_TIMESTAMP を使用する方法

目次CURRENT_TIMESTAMPの使用CURRENT_TIMESTAMPを使用したタイムスタン...

CentOS 7 に Docker 1.8 をインストールする詳細な手順

Docker は、次の CentOS バージョンでの実行をサポートしています。 • CentOS 7...

Linux で大きなファイルの指定された内容を見つける方法

大きなことも小さなことも考えて、方向転換しましょう。 Linux では非常に大きなファイルに遭遇する...

インストールされていないバージョンの MySQL を使用する手順とパスワードを忘れた場合の解決策

最初のステップは、圧縮されたパッケージを対応するディスクに解凍することです。 2 番目の手順は、cm...

Docker に nginx をインストールし、https 経由でアクセスを構成する方法

1. 最新のnginx dockerイメージをダウンロードする $ docker pull ngin...

CSSの使用に関する深い理解 clear:both

clear:both清除浮動これは私が常に持っていた印象ですが、私はこれをめったに使用せず、私の理...

ウェブページ内の 2 つのボックス モデル (W3C ボックス モデル、IE ボックス モデル)

Web ページ ボックス モデルには 2 種類あります。 1: 標準 W3C ボックス モデル。2:...

Linux に setup.py プログラムをインストールする方法

まず次のコマンドを実行します: [root@mini61 setuptools-8.2.1]# py...

Spring Boot 階層化パッケージング Docker イメージの実践と分析 (推奨)

目次1. Springbootプロジェクトを準備する2. 関連する設定を実行する3.パッケージ4.D...

React Native の基本原則の深い理解 (Bridge of React Native)

この記事では、React Native の基本をすでに理解していることを前提とし、ネイティブと Ja...

Tomcatが親の委任メカニズムを破壊する方法についての簡単な説明

目次JVM クラスローダーTomcat クラスローダークラスを検索ロードクラスクラスをロードしようと...

React Router 5.1.0 はページジャンプナビゲーションを実装するために useHistory を使用します

目次1. withRouterコンポーネントを使用する2. ルートタグを使用するReactRoute...

データバインディングとリストデータの表示にはVue3を使用する

目次1. Vue2との比較1. Vue3の新機能2. Vue2とVue3の応答原理の比較3. 配列の...

docker を使用して Django テクノロジー スタック プロジェクトをデプロイする方法

Docker の人気と成熟に伴い、Docker は徐々にプロジェクトをデプロイするための第一の選択肢...