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

项目中需要用到日期时间插件,但是项目要使用公司内部的镜像源且没有UI库,只能放弃使用elementUI,iview等一些组件库,最后想到使用layDate实现该功能

参考:

https://www.cnblogs.com/duanzhenzhen/p/10611028.html
https://www.cnblogs.com/qq376324789/p/11224717.html

使用过程:

  1. 下载插件:https://www.layui.com/laydate/
  2. 复制文件夹到项目中
    在vue中使用layDate日期时间插件_第1张图片
    将laydate文件夹放在根目录的static下
  3. 引入
<!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

  1. 定义日期时间组件
<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>
  1. 引入组件
<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>

  1. 修改背景颜色和字体颜色
    修改laydate/theme/default/laydate.css,可以修改字体颜色和背景颜色

你可能感兴趣的:(Vue,vue.js,前端)