介绍
<李> npm install bootstrap@4.0.0 ——save-dev <李> npm install jquery@3.3.1 ——save-dev <李> npm install moment@2.22.2 ——save-dev <李> npm install pc-bootstrap4-datetimepicker@4.17.50 ——save-dev …
“devDependencies": {
“pc-bootstrap4-datetimepicker":,“^ 4.17.50",
“moment":,“^ 2.22.2",
“jquery":,“^ 3.3.1",
“bootstrap":“4.0.0"
} 插件配置
npm install @fortawesome/fontawesome-free@5.5.0 ——save-dev & lt; script>
import & # 39; @fortawesome/fontawesome-free/css/all.css& # 39;
import $,得到& # 39;jquery # 39;
export default {
…
创建:函数(),{
图标:{
时间:,& # 39;far fa-clock& # 39;
,,,日期:,& # 39;far fa-calendar& # 39;
,,,:,& # 39;fas fa-arrow-up& # 39;
,,,:,& # 39;fas fa-arrow-down& # 39;
之前,,,:,& # 39;fas fa-chevron-left& # 39;
下:,,,,& # 39;fas fa-chevron-right& # 39;
今天,,,:,& # 39;fas fa-calendar-check& # 39;
,,,明确:,& # 39;far fa-trash-alt& # 39;
,,,关闭:,& # 39;far fa-times-circle& # 39;
}
}
}
& lt;/脚本 插件使用
& lt; template>
& lt; div 类=癱ontainer"祝辞
& lt; div 类=皉ow>
& lt; div 类=癱ol-md-12"祝辞
& lt;日期选择
v模型=癲ate"
:配置=皁ptions"
@dp-hide=皊howDatePickResult"/比;
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/template> & lt; script>
import & # 39;引导/dist/css/bootstrap.css& # 39;
import datePicker 得到& # 39;vue-bootstrap-datetimepicker& # 39;
import & # 39; pc-bootstrap4-datetimepicker/构建/css/bootstrap-datetimepicker.css& # 39;
import & # 39; @fortawesome/fontawesome-free/css/all.css& # 39;
import $,得到& # 39;jquery # 39;
export default {
名称:,& # 39;helloworld # 39;
data (), {
return {
日期:,new 日期(),
选项:{
格式:& # 39;YYYY-MM-DD HH: mm: ss # 39;
useCurrent:假的,
地区:& # 39;应用# 39;
提示:{
,selectTime: & # 39; & # 39;
}
}
}
},
方法:,{
showDatePickResult: function (), {
console.log (this.date)
}
},
组件:{
datePicker
},
创建:function (), {
.fn.datetimepicker.defaults美元.extend美元(真的,,,,{
,图标:{
,,时间:,& # 39;far fa-clock& # 39;
,,日期:,& # 39;far fa-calendar& # 39;
,,:,& # 39;fas fa-arrow-up& # 39;
,,:,& # 39;fas fa-arrow-down& # 39;
,,以前:& # 39;fas fa-chevron-left& # 39;
,,下一个:& # 39;fas fa-chevron-right& # 39;
,,今天,& # 39;fas fa-calendar-check& # 39;
,,明确:& # 39;far fa-trash-alt& # 39;
,,关闭:& # 39;far fa-times-circle& # 39;
,}
})
}
}
& lt;/script>
这期内容当中小编将会给大家带来有关如何在vue-cli 3中使用vue-bootstrap-datetimepicker日期插件,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
安装引导
安装jquery
安装时刻
安装pc-bootstrap4-datetimepicker
或者直接设置包。json,然后通过npm安装安装包。json配置如下:
然后安装vue-bootstrap-datetimepicker,安装方法与上述依赖项安装一致。
插件配置
由于vue-bootstrap-datetimepicker这个插件的原始版本是基于引导3。x版本开发的,后来为了适应引导4。x,有人对其进行了拓展(此时pc-bootstrap4-datetimepicker可以看做引导4。x的补丁),但是如果直接使用这个插件默认的图标(类似于时间图标或者日期图标)均显示不出来,因此还需要一下配置。
出现上述问题的原因在于引导4。x删除了glyphicon图标,所以呢,首先需要安装fortawesome插件,安装方法如下:
然后在使用datetimepicker这个插件的Vue文件中使用一下代码配置:
上述代码中创建的函数属于Vue生命周期中的一个钩子函数
插件使用
安装相关依赖插件和配置插件图片,接下来可以使用这个插件了,整个Vue代码如下:
