element ui 日期范围组件实现

date-range 代码

<template>
  <div class="range-wrapper">
<!--    <label>{{label}}</label>-->
    <el-date-picker v-model="startDateTmp" :type="type" :editable=false :value-format="valueFormat" :picker-options="pickerOptionscreate" placeholder="选择日期" @change="change1" :size="size">
    </el-date-picker>
    <span class="sub">至</span>
    <el-date-picker v-model="endDateTmp" :type="type" :editable=false :value-format="valueFormat" :picker-options="pickerOptionsend" placeholder="选择日期" @change="change2" :size="size">
    </el-date-picker>
  </div>
</template>
<script>
/**
 * com-date-range
 * @desc 时间范围选择器
 */
export default {
  props: {
    startDate: {
      type: String,
      default: ''
    },
    endDate: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: 'small'
    },
    type: {
      type: String,
      default: 'date'
    }
  },
  watch: {
    startDate: {
      handler: function(val, oldVal) {
        this.startDateTmp = val
      },
      immediate: true
    },
    endDate: {
      handler: function(val, oldVal) {
        this.endDateTmp = val
      },
      immediate: true
    }
  },
  computed: {
    valueFormat: function () {
			let format = 'yyyy-MM-dd'
      if (this.type === 'month') {
        format = 'yyyy-MM'
      }
      return format
		},
  },
  data() {
    let that = this;
    return {
      pickerOptionscreate: {
        disabledDate(time) {
          // 开始时间的禁用
          return that.endDateTmp ? time.getTime() > new Date(that.endDateTmp).getTime() : false;
        }
      },
      // 结束时间
      pickerOptionsend: {
        disabledDate(time) { // 结束时间的禁用
          return time.getTime() < new Date(that.startDateTmp).getTime() - 8.64e7;
        }
      },
      startDateTmp: '',
      endDateTmp: ''
    }
  },
  methods: {
    change1: function(val) {
      this.$emit('update:startDate', val)
    },
    change2: function(val) {
      this.$emit('update:endDate', val)
    },
  }
}
</script>
<style scoped lang="scss">
.range-wrapper {
  display: inline-block;
  width: 100%;
  line-height: 35px;
  label {
    color: #606060;
  }
  .sub {
    margin: 0 10px;
  }
  
  ::v-deep .el-date-editor.el-input {
    width: calc(50% - 17px);
  }
  ::v-deep .el-input__inner {
    line-height: 32px!important;
  }
}
</style>

使用

<date-range :startDate.sync="queryForm.startDateStr" :endDate.sync="queryForm.endDateStr"></date-range>