drp-ui/src/components/date-wrapper/index.vue

<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 {
        // form:{
        //   startTime: '',
        //   endTime: '',
        // }
      }
    }
  }
</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>