vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件


Posted in Vue.js onFebruary 20, 2021

需求背景简介

最近打算使用vue并结合前端工程化体系重构之前的一个Demo,其中有一个功能是使用bootstrap的datepicker插件选择查询日期。在网上找到了一个基于vue扩展的datepicker插件:vue-bootstrap-datepicker。这篇博客主要介绍在使用vue-cli 3创建的项目中如何使用该插件。项目地址:https://gitlab.com/JiaoXN/vuecli3usedatetimepicker.git

安装插件及其依赖项

这个插件有两个版本:一个是基于bootstrap 3.x开发的,一个是基于bootstrap 4.x开发的。本篇博客将会介绍后一种插件的安装及使用方法。

首先呢,需要安装插件的依赖项,包括bootstrap 4.x、jquery >= 1.8.3、moment.js 2.22以及pc-bootstrap4-datetimepicker。

  • 安装bootstrap
npm install bootstrap@4.0.0 --save-dev
  • 安装jquery
npm install jquery@3.3.1 --save-dev
  • 安装moment
npm install moment@2.22.2 --save-dev
  • 安装pc-bootstrap4-datetimepicker
npm install pc-bootstrap4-datetimepicker@4.17.50 --save-dev

或者直接设置package.json,然后通过npm install安装。 package.json配置如下:

...
"devDependencies": {
	"pc-bootstrap4-datetimepicker": "^4.17.50",
	"moment": "^2.22.2",
	"jquery": "^3.3.1",
	"bootstrap": "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 install @fortawesome/fontawesome-free@5.5.0 --save-dev

然后在使用datetimepicker这个插件的Vue文件中使用一下代码配置:

<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

上述代码中的created函数属于Vue生命周期中的一个钩子函数

插件使用

安装相关依赖插件和配置插件图片,接下来可以使用这个插件了,整个Vue代码如下:

<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>

其中<template></template>中的内容就不用多赘述了,了解Vue的都基本清楚,如果不太了解Vue的朋友可以查看Vue的官网。

data中的options内容是datetimepicker这个插件的相关配置,整体的配置请参考这个链接,目前使用的配置描述如下:

  • format:日期格式,这一块需要注意的是,如果将HH:mm:ss中的HH换成hh,则这个插件描述日期的方式会分成AM和PM
  • locale: 表示使用哪种语言,zh-cn表示中文简体
  • tooltips: 表示提示内容,这一块这个插件有个Bug,在选择日期和选择时间的提示都是“Select Time”,因此这里把这个提示设置为空

以上就是vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件的详细内容,更多关于使用vue-bootstrap-datetimepicker日期插件的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
8个非常实用的Vue自定义指令
Dec 15 Vue.js
vue3.0中使用element的完整步骤
Mar 04 Vue.js
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
Vue实现动态查询规则生成组件
May 27 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
Vue如何清空对象
Mar 03 Vue.js
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
vue实现列表垂直无缝滚动
Apr 08 Vue.js
vue修饰符.capture和.self的区别
Apr 22 Vue.js
Vue实现todo应用的示例
Feb 20 #Vue.js
基于vue的video播放器的实现示例
Feb 19 #Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 #Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 #Vue.js
Vue如何实现变量表达式选择器
Feb 18 #Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 #Vue.js
如何在 Vue 中使用 JSX
Feb 14 #Vue.js
You might like
PHP-MySQL教程归纳总结
2008/06/07 PHP
PHP捕获Fatal error错误的方法
2014/06/11 PHP
thinkphp文件处理类Dir.class.php的用法分析
2014/12/08 PHP
php7基于递归实现删除空文件夹的方法示例
2017/06/15 PHP
php实现简单的权限管理的示例代码
2017/08/25 PHP
php设计模式之代理模式分析【星际争霸游戏案例】
2020/03/23 PHP
PHP如何使用cURL实现Get和Post请求
2020/07/11 PHP
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
2006/12/23 Javascript
IE和Firefox下javascript的兼容写法小结
2008/12/10 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
浅析JavaScript中的delete运算符
2013/11/30 Javascript
jquery链式操作的正确使用方法
2014/01/06 Javascript
Node.js实现简单聊天服务器
2014/06/20 Javascript
JQuery控制Radio选中方法分析
2015/05/29 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
JS正则表达式之非捕获分组用法实例分析
2016/12/28 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
2017/04/11 Javascript
图文详解vue框架安装步骤
2019/02/12 Javascript
小程序实现多列选择器
2019/02/15 Javascript
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
js实现盒子滚动动画效果
2020/08/09 Javascript
详细介绍Python函数中的默认参数
2015/03/30 Python
python打开文件并获取文件相关属性的方法
2015/04/23 Python
详解使用python crontab设置linux定时任务
2016/12/08 Python
pandas DataFrame数据转为list的方法
2018/04/11 Python
Python下调用Linux的Shell命令的方法
2018/06/12 Python
Django实现列表页商品数据返回教程
2020/04/03 Python
使用python实现时间序列白噪声检验方式
2020/06/03 Python
浅谈Python中的字符串
2020/06/10 Python
Python获取浏览器窗口句柄过程解析
2020/07/25 Python
CSS3的Border-radius轻松制作圆角
2012/12/24 HTML / CSS
小学教师评语大全
2014/04/23 职场文书
小学生田径运动会广播稿
2014/09/11 职场文书
师范生免费教育协议书范本
2014/10/09 职场文书
邀请函怎么写
2015/01/30 职场文书
JS中一些高效的魔法运算符总结
2021/05/06 Javascript