在项目中遇到日期时间插件的选择困扰，尝试了bootstrap和element的插件但出现错误。对于初学者来说是一大挑战。最终，通过引入layDate成功解决了问题。步骤包括下载js包，放置于static目录，引入到HTML，定义时间日期组件，并在vue中应用，实现了所需功能。
项目中需要用到日期时间插件，尝试用bootstrap、element的时间插件都各有各的报错，对于一个菜鸟来说真的是很痛苦啊。终于，最后用了layDate实现了需要的功能
最终效果：
使用步骤：
1.下载js包
2.将laydate文件夹放在根目录的static下
3.在index.html中引入
1
2
3
4
5
6
XXX7
8
9
10
11
12
13
4.定义时间日期组件
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;
}
});
}
};
.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;
}
5.引用组件
体检日期：
扫一扫
1910
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
