项目中需要用到日期时间插件,但是项目要使用公司内部的镜像源且没有UI库,只能放弃使用elementUI,iview等一些组件库,最后想到使用layDate实现该功能
参考:
https://www.cnblogs.com/duanzhenzhen/p/10611028.html
https://www.cnblogs.com/qq376324789/p/11224717.html
使用过程:
- 下载插件:https://www.layui.com/laydate/
- 复制文件夹到项目中
将laydate文件夹放在根目录的static下 - 引入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>demo</title>
<!-- 引入laydate -->
<script src="./static/laydate/laydate.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
在根目录的index.html文件中引入laydate.js
- 定义日期时间组件
<template>
<div class="hello">
<input type="text" readonly="readonly" placeholder="选择体检时间" id="orderTime" v-model="date">
</div>
</template>
<script>
export default {
name: "myTime",
data() {
return {
date: ""// 存储选择的日期
};
},
created:function(){
setTimeout( function(){
let that = this
laydate.render({
elem: "#orderTime", //指定元素
type: 'datetime',
format:'yyyy-MM-dd HH:mm:ss',
trigger: 'click',
done:function(value, date, endDate){
that.date=value;
}
});
}, 0 );
},
};
</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>
- 引入组件
<template>
<div class="">
<label for="orderTime">日期时间:</label>
<myTime />
</div>
</template>
<script>
import myTime from './myTime.vue'
export default {
name: 'HelloWorld',
components:{
myTime
},
data () {
return {
}
}
}
</script>
<style scoped>
</style>
- 修改背景颜色和字体颜色
修改laydate/theme/default/laydate.css,可以修改字体颜色和背景颜色