vue使用日期时间插件layDate
项目中需要用到日期时间插件，尝试用bootstrap、element的时间插件都各有各的报错，对于一个菜鸟来说真的是很痛苦啊。终于，最后用了layDate实现了需要的功能
最终效果：
使用步骤：
1.下载js包
2.将laydate文件夹放在根目录的static下
3.在index.html中引入
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 6 <title>XXX</title> 7 <script src="./static/laydate/laydate.js" type="text/javascript" charset="utf-8"></script> 8 </head> 9 <body> 10 <div id="app"></div> 11 <!-- built files will be auto injected --> 12 </body> 13 </html>
4.定义时间日期组件
<template>
<div class="hello">
<input type="text" placeholder="选择体检时间" id="orderTime" v-model="date">
</div>
</template>
<script>
export default {
name: "myTime",
data() {
return {
date: ""// 存储选择的日期
};
},
mounted() {
// 使用：执行一个laydate实例
laydate.render({
elem: "#orderTime", // 指定元素
type: "datetime", // 组件的类型：year,month,time···
format: 'yyyy-MM-dd HH:mm'// 设置显示格式
done: value => { // 点击确认执行的回调函数，会把当前选择的时间传入进来
// 把选择的时间赋值给先前定义好的变量，显示在页面
this.date = value;
}
});
}
};
</script>
<style scoped>
.hello {
display: inline-block;
}
.hello input {
margin-left: -4px;
width: 300px;
height: 40px;
border-radius: 4px;
border: 1px solid #DCDFE6;
}
.layui-laydate .layui-this {
background-color: #358ee7 !important;
}
</style>
5.引用组件
<div class=""> <label for="orderTime">体检日期：</label> <myTime /> </div>
