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

本文主要是介绍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 = thisreturn {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 = thisreturn {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-wrapperv-model="createTime"style="width: 100%"></el-date-wrapper>

方法二：

<componentv-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",},},]