vue cli 3 How to use the vue bootstrap datetimepicker date plug in

Requirements Background Introduction

Recently, I plan to use vue and reconstruct the previous Demo with the front-end engineering system. One of the functions is to select the query date using datepicker plug-in of bootstrap. An datepicker plug-in based on vue extension was found online: vue-bootstrap-datepicker. This blog focuses on how to use the plug-in in projects created using vue-cli 3. Project address: https://gitlab.com/JiaoXN/vuecli3usedatetimepicker.git

Installing plug-ins and their dependencies

There are two versions of this plug-in: one based on bootstrap 3. x and one based on bootstrap 4. x. This blog will introduce the installation and use of the latter plug-in.

First, you need to install the plug-in dependencies, including bootstrap 4. x, jquery > = 1.8. 3, moment. js 2.22 and pc-bootstrap4-datetimepicker.

Installing bootstrap

npm install bootstrap@4.0.0 --save-dev

Installing jquery

npm install jquery@3.3.1 --save-dev

Installing moment

npm install moment@2.22.2 --save-dev

Installing pc-bootstrap4-datetimepicker

npm install pc-bootstrap4-datetimepicker@4.17.50 --save-dev

Or set up package. json directly and install through npm install. package. json is configured as follows:

...
"devDependencies": {
	"pc-bootstrap4-datetimepicker": "^4.17.50",
	"moment": "^2.22.2",
	"jquery": "^3.3.1",
	"bootstrap": "4.0.0"
}

Then install vue-bootstrap-datetimepicker in the same way as dependency installation 1 above.

Plug-in configuration

Since the original version of vue-bootstrap-datetimepicker plug-in was developed based on Bootstrap 3. x, it was expanded to adapt to Bootstrap 4. x (pc-bootstrap4-datetimepicker can be regarded as a patch of Bootstrap 4. x at this time), but if you use this plug-in directly, the default icon (similar to time icon or date icon) will not be displayed, so it needs 1 configuration.

The reason for the above problem is that fortawesome 4. x removes the glyphicon icon, so you need to install the fortawesome plug-in first. The installation method is as follows:

npm install @fortawesome/fontawesome-free@5.5.0 --save-dev

Then in the Vue file that uses the datetimepicker plug-in, use the following code 1 to configure:

<script>

import '@fortawesome/fontawesome-free/css/all.css'

import $ from 'jquery'

export default {
	...
	created: function() {
		icons: {
			time: 'far fa-clock',
	    date: 'far fa-calendar',
	    up: 'fas fa-arrow-up',
	    down: 'fas fa-arrow-down',
	    previous: 'fas fa-chevron-left',
	    next: 'fas fa-chevron-right',
	    today: 'fas fa-calendar-check',
	    clear: 'far fa-trash-alt',
	    close: 'far fa-times-circle'
		}
	}
}

</script

The created function in the above code belongs to a hook function in the Vue life cycle

Plug-in usage

Install the dependent plug-in and configure the plug-in picture, and then you can use this plug-in. The whole Vue code is as follows:

<template>
	<div class="container">
		<div class="row>
			<div class="col-md-12">
				<date-picker
					v-model="date"
					:config="options"
					@dp-hide="showDatePickResult"/>
			</div>
		</div>
	</div>
</template>

<script>
import 'bootstrap/dist/css/bootstrap.css'

import datePicker from 'vue-bootstrap-datetimepicker'

import 'pc-bootstrap4-datetimepicker/build/css/bootstrap-datetimepicker.css'

import '@fortawesome/fontawesome-free/css/all.css'

import $ from 'jquery'

export default {
	name: 'HelloWorld',
	data () {
		return {
			date: new Date(),
			options: {
				format: 'YYYY-MM-DD HH:mm:ss',
				useCurrent: false,
				locale: 'zh-cn',
				tooltips: {
				 selectTime: ''
				}
			}
		}
	},
	methods: {
		showDatePickResult: function () {
			console.log(this.date)
		}
	},
	components: {
		datePicker
	},
	created: function () {
		$.extend(true, $.fn.datetimepicker.defaults, {
	 		icons: {
	  		time: 'far fa-clock',
	  		date: 'far fa-calendar',
	  		up: 'fas fa-arrow-up',
	  		down: 'fas fa-arrow-down',
	  		previous: 'fas fa-chevron-left',
	  		next: 'fas fa-chevron-right',
	  		today: 'fas fa-calendar-check',
	  		clear: 'far fa-trash-alt',
	  		close: 'far fa-times-circle'
	 		}
		})
	}
}
</script>

Among them < template > < /template > There is no need to repeat the contents in. Those who know Vue are basically clear. If you don't know Vue well, you can check the official website of Vue.

The content of options in data is the relevant configuration of datetimepicker plug-in. Please refer to this link for the overall configuration. The current configuration description is as follows:

format: Date format. It should be noted in this block that if HH in HH: mm: ss is replaced by hh, the plug-in will describe the date in a way that is divided into AM and PM locale: Which language is used, zh-cn for simplified Chinese tooltips: Indicates the prompt content. This plug-in has an Bug, and the prompt for selecting date and time is "Select Time", so this prompt is set to null here

That's how vue-cli 3 works with the vue-bootstrap-datetimepicker date plug-in. For more information about using the vue-bootstrap-datetimepicker date plug-in, please follow other articles on this site!