element 两个日期选择器实现 当月查询（不可跨月）

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

需求 ：当月查询指的是 只能查询某月范围之内的 

举例：开始日期选择了22.10.01 的话 结束日期只能选择 22.10.01 - 22.10.31 的日期

拓展：网上还有那种开始时间 往后推30天的 方式 可自行百度

展示效果

HTML

标红字段代表着 如果当前月份是10月 ，开始日期选择了9月，初始化打开结束日期的时候自动选择9月 ，反之亦然。

                    <el-date-picker
                        v-model="startTimeShow"
                        type="date"
                        format="yyyy-MM-dd"
                        style="width: 180px"
                        value-format="yyyy-MM-dd"
                        placeholder="开始日期"
                        :picker-options="pickerOptionsStart"
                        :default-value="endTimeShow ? endTimeShow : ''"
                    ></el-date-picker>

                    <el-date-picker
                        class="dateT"
                        v-model="endTimeShow"
                        type="date"
                        format="yyyy-MM-dd"
                        style="width: 180px"
                        value-format="yyyy-MM-dd"
                        placeholder="结束日期"
                        :picker-options="pickerOptionsEnd"
                        :default-value="startTimeShow ? startTimeShow : ''"
                    ></el-date-picker>

JS

            startTimeShow: "",
            endTimeShow: "",
            // 开始起始点禁用日期筛选
            pickerOptionsStart: {
                disabledDate: (time) => {
                    if (!this.endTimeShow) {
                        return false;
                    }
                    return (
                        time.getTime() > new Date(this.endTimeShow).getTime() ||
                        time.getTime() <
                            new Date(
                                `"${this.endTimeShow.slice(0, this.endTimeShow.length - 2)}01"`
                            ).getTime()
                    );
                },
            },
            // 开始结束点禁用日期筛选
            pickerOptionsEnd: {
                disabledDate: (time) => {
                    if (!this.startTimeShow) {
                        return false;
                    }
                    // 判断当前日期所在月份有多少天
                    const getDuration = (preDate) => {
                        const date = new Date(preDate);
                        const year = date.getFullYear();
                        const month = date.getMonth() + 1;
                        const d = new Date(year, month, 0);
                        return d.getDate();
                    };
                    return (
                        time.getTime() < new Date(this.startTimeShow).getTime() - 8.64e7 ||
                        time.getTime() >
                            new Date(
                                `"${this.startTimeShow.slice(
                                    0,
                                    this.startTimeShow.length - 2
                                )}${getDuration(this.startTimeShow)}"`
                            ).getTime()
                    );
                },
            },