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

最新推荐文章于 2023-05-31 11:45:26 发布

濮家大少

最新推荐文章于 2023-05-31 11:45:26 发布

阅读量1.1k

点赞数 3

分类专栏： Vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_42527726/article/details/107107016

版权

Vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

项目中需要用到日期时间插件，但是项目要使用公司内部的镜像源且没有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，可以修改字体颜色和背景颜色

濮家大少

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
在vue中使用layDate日期时间插件

项目中需要用到日期时间插件，但是项目要使用公司内部的镜像源且没有UI库，只能放弃使用elementUI,iview等一些组件库，最后想到使用layDate实现该功能参考：https://www.cnblogs.com/duanzhenzhen/p/10611028.htmlhttps://www.cnblogs.com/qq376324789/p/11224717.html使用过程：下载插件：https://www.layui.com/laydate/复制文件夹到项目中将laydate文件
复制链接

扫一扫