date-range选择日期范围

组件实现的功能

• 开始日期小于结束日期
• 结束日期大于开始日期

实现思路

开始日期变化后，将选择结束日期的date-picker中小于startdate的日期都禁用

<template>
    <!-- 实现以下功能：
    1.开始时间日期等于结束日期
    2.结束日期大于开始日期-->
    <div class="start-end-range-calendar">
        <el-date-picker
            v-model="startDate"
            type="date"
            :picker-options="startDateOptions"
            :clear-icon="''"
            placeholder="选择日期"
        ></el-date-picker>
        <span class="m-l m-r">-</span>
        <el-date-picker
            v-model="endDate"
            type="date"
            :picker-options="endDateOptions"
            :clear-icon="''"
            placeholder="选择日期"
        ></el-date-picker>
    </div>
</template>

<script>
import moment from "moment";

export default {
    name: "start-end-range-calendar",
    description: "限制起始时间区间选择",
    props: {
        defaultStartDate: {
            type: String, //YYYY-MM-DD
            required: false
        },
        defaultEndDate: {
            type: String, //YYYY-MM-DD
            required: false
        },
        format: {
            type: String, //YYYY-MM-DD
            required: false
        },
        value: {
            type: Array,
            description: "双向绑定接收值",
            default() {
                return [];
            }
        }
    },
    data() {
        return {
            startDate: "",
            startDateOptions: {},
            endDate: "",
            endDateOptions: {}
        };
    },
    computed: {
        dateFormat() {
            if (this.format) {
                return this.format;
            } else {
                return "YYYY-MM-DD";
            }
        }
    },
    created() {
        this.initial();
    },
    methods: {
        initial() {
            let defaultStartDate = this.defaultStartDate,
                defaultEndDate = this.defaultEndDate,
                minDate = this.minDate,
                maxDate = this.maxDate;
            if (defaultStartDate && defaultEndDate) {
                this.startDate = defaultStartDate;
                this.endDate = defaultEndDate;
            }
        },
        transformDate(date, format) {
            return date ? moment(date).format(format || this.dateFormat) : "";
        }
    },
    watch: {
        value(newdates) {
            if (Array.isNotEmpty(newdates)) {
                if (this.startDate != newdates[0]) {
                    this.startDate = newdates[0];
                }

                if (this.endDate != newdates[1]) {
                    this.endDate = newdates[1];
                }
            } else {
                if (this.startDate != "") {
                    this.startDate = "";
                }

                if (this.endDate != "") {
                    this.endDate = "";
                }
            }
        },
        defaultStartDate: {
            handler(curVal) {
                if (curVal !== "" && curVal !== null && curVal !== undefined) {
                    this.startDate = curVal;
                }
            }
        },
        defaultEndDate: {
            handler(curVal) {
                if (curVal !== "" && curVal !== null && curVal !== undefined) {
                    this.endDate = curVal;
                }
            }
        },
        startDate: {
            handler(newStartDate) {
                let minDate = newStartDate;
                this.endDateOptions = {
                    disabledDate(time) {
                        let _time = moment(time).valueOf();
                        return _time < moment(minDate).valueOf();
                    }
                };

                this.$emit("input", [
                    this.transformDate(newStartDate),
                    this.transformDate(this.endDate)
                ]);
            }
        },
        endDate: {
            handler(newEndDate) {
                let maxDate = newEndDate;

                this.startDateOptions = {
                    disabledDate(time) {
                        let _time = moment(time).valueOf();
                        return _time > moment(maxDate).valueOf();
                    }
                };

                this.$emit("input", [
                    this.transformDate(this.startDate),
                    this.transformDate(newEndDate)
                ]);
            }
        }
    }
};
</script>

<style lang="less">
.start-end-range-calendar {
    .el-date-editor.el-input {
        width: 140px;
    }
}
</style>

引用方式

<start-end-range-calendar v-model="startDate" />