Element UI：时间组件，支持开始结束时间任选其一

一、背景

Element-UI中时间段组件el-date-picker，需要开始时间和结束时间都选择上，但是业务场景更多的是区间中可以只选择其中一个或开始时间和结束时间都选择

1.el-date-picker：开始时间与结束时间必须同时选择

2.业务需求：开始时间、结束时间支持全部选择的同时，还需要仅选择开始/结束时间；①开始时间往后所有；②结束时间往前所有

二、封装

<template>
  <div class="date-wrapper">
    <el-date-picker 
      :type="type" 
      :placeholder="startPlaceholder" 
      :clearable="clearable"  
      :value-format="valueFormat" 
      v-model="startTime"
      :picker-options="pickerOptions" 
      ></el-date-picker>
      <span style="padding: 0 3px">{{rangeSeparator}}</span>
    <el-date-picker 
      :type="type" 
      :placeholder="endPlaceholder" 
      :clearable="clearable" 
      :value-format="valueFormat" 
      v-model="endTime" 
      :picker-options="pickerOptions1" 
      ></el-date-picker>
  </div>
</template>
<script>

  export default {
    name: "dateWrapper",
    props:{
      value:{
        type:Array,
        require:true,
      },
      rangeSeparator:{
        type:String,
        default:'-'
      },
      type:{
        type:String,
        default:'date',
      },
      valueFormat:{
        type:String,
        default:'yyyy-MM-dd',
      },
      startPlaceholder:{
        type:String,
        default:'选择开始日期'
      },
      endPlaceholder:{
        type:String,
        default:'选择结束日期'
      },
      clearable:{
        type:Boolean,
        require:false,
      }
    },
    computed:{
      startTime:{
        get(){
          console.log(this.value,'this.value');
          return (this.value && this.value[0]) || '';
        },
        set(value){
          console.log(value,'startTime');
          this.$emit('input',[value,this.endTime])
        }
      },
      
      endTime: {
        get(){
          return (this.value &&this.value[1]) || '';
        },
        set(value){
          console.log(value,'endTime');
          this.$emit('input',[this.startTime,value])
        }
      },

      pickerOptions: {
        get(){
          const that = this
          return {
            disabledDate(time) {
              if(that.endTime && that.endTime !== ''){
                return time.getTime() > new Date(that.endTime).getTime()
              }
            }
          }
        },
        set(value){
          this.$emit("input", value);
        }
      },
      pickerOptions1:{
        get(){
          const that = this
          return {
            disabledDate(time) {
              if(that.startTime && that.startTime !== ''){
                return (time.getTime()+ 3600 * 1000 * 24) < new Date(that.startTime).getTime()
              }
            }
          }
        },
        set(value){
          this.$emit("input", value);
        }
      }
    },
    data() {
      return {
      }
    }
  }
</script>
<style lang="scss">
  .date-wrapper{
    display: flex;
    justify-content: flex-start;
    vertical-align: center;
    .el-date-editor{
      // width: 102px !important;
      .el-input__inner{
        padding: 0px 0px 0 10px !important;
      }
      .el-input__prefix{
        display: none;
      }
      .el-input__suffix{
        text-align: right;
      }
    }
  }
</style>

三、实例

方法一：

//引入
components: {
    ElDateWrapper: () => import("@/components/date-wrapper/index.vue"),
  },
方法一：
 <el-date-wrapper
    v-model="createTime"
    style="width: 100%"
  >
  </el-date-wrapper>

方法二：

<component
   v-if="attr.is === 'el-date-wrapper'"
   v-bind="attr"
   v-model="innerValue[item.key]"
   :source.sync="innerValue"
   @change="$emit('submit')"
   style="width: 100%"
 >
 </component>

// 列值---用于循环数组
const Columns = [
{
    item:{
      key: "createTimeQueue",
      title: "创建时间",
      span:12,
    },
    attr: {
      clearable:true,
      is: "el-date-wrapper",
    },
  },
 ]