How to use vue-bootstrap-datetimepicker date plugin in vue-cli 3

Demand Background

Recently, I plan to use Vue and combine it with the front-end engineering system to reconstruct a previous Demo. One of the functions is to use the bootstrap datepicker plug-in to select the query date. I found a datepicker plug-in based on Vue extension on the Internet: vue-bootstrap-datepicker. This blog mainly introduces how to use the plugin in projects created with vue-cli 3. Project address: https://gitlab.com/JiaoXN/vuecli3usedatetimepicker.git

Install the plugin and its dependencies

This plugin has two versions: one is developed based on bootstrap 3.x, and the other is developed based on bootstrap 4.x. This blog will introduce the installation and use of the latter plug-in.

First of all, you need to install the plugin dependencies, including bootstrap 4.x, jquery >= 1.8.3, moment.js 2.22, and pc-bootstrap4-datetimepicker.

• Install bootstrap

npm install [email protected] --save-dev

• Install jQuery

npm install [email protected] --save-dev

• Install moment

npm install [email protected] --save-dev

• Install pc-bootstrap4-datetimepicker

npm install [email protected] --save-dev

Or set package.json directly and install it via npm install. The package.json configuration is 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. The installation method is the same as the above dependency installation.

Plugin Configuration

Since the original version of the vue-bootstrap-datetimepicker plug-in was developed based on Bootstrap 3.x, it was later expanded to adapt to Bootstrap 4.x (at this time, pc-bootstrap4-datetimepicker can be seen as a patch for Bootstrap 4.x). However, if you use this plug-in directly, the default icons (similar to time icons or date icons) will not be displayed, so the following configuration is required.

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

npm install @fortawesome/[email protected] --save-dev

Then use the following code configuration in the Vue file that uses the datetimepicker plugin:

<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

Plugin Usage

Install related dependent plug-ins and configure plug-in images. Then you can use this plug-in. The entire 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>

There is no need to elaborate on the content in <template></template>. Those who know Vue will know it basically. If you don’t know much about Vue, you can check Vue’s official website.

The options in data are the configurations of the datetimepicker plugin. For the overall configuration, please refer to this link. The current configuration is described as follows:

• format: Date format. It should be noted that if you replace HH in HH:mm:ss with hh, the plugin will describe the date in AM and PM.
• locale: indicates the language used, zh-cn indicates simplified Chinese
• tooltips: indicates the tooltip content. There is a bug in this plugin. The tooltips for selecting date and time are both "Select Time", so this tooltip is set to empty.

The above is the details of how to use the vue-bootstrap-datetimepicker date plug-in in vue-cli 3. For more information on using the vue-bootstrap-datetimepicker date plug-in, please pay attention to other related articles on 123WORDPRESS.COM!