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 相关文章推荐
深入了解Vue3模板编译原理
Nov 19 Vue.js
Vue如何实现验证码输入交互
Dec 07 Vue.js
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
vue实现简单数据双向绑定
Apr 28 Vue.js
详解Vue router路由
Nov 20 Vue.js
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
vue修饰符.capture和.self的区别
Apr 22 Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
vue如何清除浏览器历史栈
May 25 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
建立文件交换功能的脚本(三)
2006/10/09 PHP
PHP 输出缓存详解
2009/06/20 PHP
ThinkPHP中的三大自动简介
2014/08/22 PHP
php实现屏蔽掉黑帽SEO的搜索关键字
2015/04/15 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
PHP中非常有用却鲜有人知的函数集锦
2019/08/17 PHP
类似GMAIL的Ajax信息反馈显示
2010/02/16 Javascript
JQuery 选择器 xpath 语法应用
2010/05/13 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
2013/11/19 Javascript
jQuery提示效果代码分享
2014/11/20 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
2015/02/04 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
2015/02/05 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
javascript创建含数字字母的随机字符串方法总结
2016/08/01 Javascript
AngularJS实践之使用NgModelController进行数据绑定
2016/10/08 Javascript
Node.js 使用命令行工具检查更新
2017/06/08 Javascript
浅析JavaScript中的特殊数据类型
2017/12/15 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
2018/09/03 Javascript
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
angular中如何绑定iframe中src的方法
2019/02/01 Javascript
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
react的hooks的用法详解
2020/10/12 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
2020/10/29 Javascript
js实现扫雷源代码
2020/11/27 Javascript
Python实现读取文件最后n行的方法
2017/02/23 Python
Python编程实现删除VC临时文件及Debug目录的方法
2017/03/22 Python
简单分析python的类变量、实例变量
2019/08/23 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
Python中logger日志模块详解
2020/08/04 Python
美体小铺瑞典官方网站:The Body Shop瑞典
2018/01/27 全球购物
计算机应用专业学生的自我评价分享
2013/11/03 职场文书
实习生自荐信范文分享
2013/11/27 职场文书
销售区域经理岗位职责
2015/04/10 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
刑事附带民事诉讼答辩状
2015/05/22 职场文书
中学生打架检讨书之500字
2019/08/06 职场文书