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

发布时间:2024年01月05日

一、背景

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",
    },
  },
 ]
文章来源:https://blog.csdn.net/LuoYi_ly_/article/details/132235450
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。