element的日期组件-两个的和单个的组件

 

 

dateOne.vue

<template>
   <div class="dateDiv">
      <el-date-picker
        :popper-class="mrClass"
        v-model="inputVal"
        type="datetime"
        format="yyyy-MM-dd HH:mm"
        :editable = false
        :clearable = false
        prefix-icon = false
        @change="change"
        :placeholder='placeholder'>
      </el-date-picker>
    </div>
</template>

<script>
  export default {
    props:['placeholder','inputVal'],
    data() {
      return {
        inputVal: '',
        mrClass:'dateStyle',
      };
    },
     methods:{
      change(data) {
        let oDate = data.getTime();//毫秒数
        let nowDate = new Date().getTime();//当前时间毫秒数

        if(oDate > nowDate){//开始时间不能大于当前时间
          this.$message({
              message: '当前时间不能大于当前时间',
              type: 'warning'
          })
          this.inputVal = ''
          return;
        }
        let str = {
          'data' : data,
          'dataTime' : oDate,
        }
        this.$emit('validDate',str)

      },
    }

  };
</script>
<style lang='less' scoped>
  .dateDiv{
    width:100%;
    height:100%;
    .el-date-editor.el-input, .el-date-editor.el-input__inner{
      width:100%;
    }
  }

</style>

date.vue == 两个的日期选择框

<template>
  <div class="blockDate">
    <el-date-picker
      v-show = title
      ref='searchForm'
      v-model="value1"
      type="datetimerange"
      format="yyyy-MM-dd HH:mm"
      :editable = false
      :clearable = false
      prefix-icon = false
      range-separator="-"
      @change="change"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    props:['title'],
    data() {
      return {
        value1: ['', ''],
        title:true,
      };
    },
     methods:{
      change(data) {
        let oDate1 = data[0]
        let oDate2 = data[1]
        let nowDate = new Date();
        if(oDate1 && oDate2){

          if ( oDate1.getTime() > oDate2.getTime() ) {//开始时间不能大于结束时间
            this.$message({
              message: '开始时间不能大于结束时间',
              type: 'warning'
            })
            this.searchForm.applyDateMax = ''
            return;
          }

          if(oDate1.getTime() > nowDate.getTime()){//开始时间不能大于当前时间
            this.$message({
                message: '开始时间不能大于当前时间',
                type: 'warning'
            })
            return;
          }

           if(oDate2.getTime() > nowDate.getTime()){//结束时间不能大于当前时间
            this.$message({
                message: '结束时间不能大于当前时间',
                type: 'warning'
            })
            return;
          }
          let str = [];
              str[0] = oDate1;
              str[1] = oDate2;
          this.$emit('validDate',str)
        }

      },
      getDate(e){
        this.$emit('validDate',e)
      }
    }
  };
</script>
<style lang='less' scoped>
  .blockDate{
    width:100%;
    height:100%;
    .el-date-editor{
      width:100%;
    }
    .el-range-editor .el-range-input{
      border:1px solid #0090ff;
    }
  }

</style>

调动方法：以单个的为例

在template里面加入：

<date class="qxxxDate" @validDate = 'ChageStartTime' :title='dateShow' :inputVal='jcxxDate.startVal'></date>

import date from '@/components/date/dateOne'//时间选择器

components: {
      date,
    },

 ChageStartTime(data){//开始时间
        let nowTime = data.dataTime+300000;
        this.jcxxDate.startVal = this.commonjs.formatDate(data.data,'yyyy-MM-dd h:m');
        this.jcxxDate.endVal = this.commonjs.getNewDate(nowTime,'yyyy-MM-dd h:m');
      },//this.commonjs.formatDate是将时间转换为yyyy-mm-dd h:m格式，第一个参数是数据，第二个是格式

这里的this.commonjs.formatDate 公共方法请看这里：

https://blog.csdn.net/qq_41619796/article/details/94406138