在vue中使用layDate日期时间插件

技术2023-09-01 107

项目中需要用到日期时间插件，但是项目要使用公司内部的镜像源且没有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>  <script src="./static/laydate/laydate.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"></div>  </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，可以修改字体颜色和背景颜色

Processed: 0.011, SQL: 9