vue3项目中季度时间区间选择

环境要求：vue3中
当前年月之前的可以选择，之后不可以选择；结束季度不能超过开始季度；如图效果

1、html结构代码

<div class="time">
  年：<el-date-picker
    :disabled-date="pickerOptions"
    v-model="startTime"
    type="year"
    placeholder="请选择"
    value-format="YYYY-MM-DD"
    @change="seasonFilterZone"
  />
</div>
<div class="time">
  开始季度：<el-select
    v-model="startSeason"
    class="m-2"
    placeholder="请选择"
    @change="changeFilterOne"
    @focus="seasonFilterOne"
  >
    <el-option
      v-for="item in seasonOpt.startSeasonOpt"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      :disabled="item.disabled"
    />
  </el-select>
</div>
<div class="time">
  结束季度：<el-select
    v-model="endSeason"
    class="m-2"
    placeholder="请选择"
    @focus="seasonFilter"
  >
    <el-option
      v-for="item in seasonOpt.endSeasonOpt"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      :disabled="item.disabled"
    />
  </el-select>
</div>

2、js代码

//引入moment
import moment from "moment";
import { ElMessage } from "element-plus";

let startTime = ref();
startTime.value = nowDate;
let startSeason = ref();
let endSeason = ref();
// 开始季度和结束季度的选择列表
const seasonOpt = reactive({
  startSeasonOpt: [
    {
      value: 1,
      label: "第一季度",
    },
    {
      value: 2,
      label: "第二季度",
    },
    {
      value: 3,
      label: "第三季度",
    },
    {
      value: 4,
      label: "第四季度",
    },
  ],
  endSeasonOpt: [
    {
      value: 1,
      label: "第一季度",
    },
    {
      value: 2,
      label: "第二季度",
    },
    {
      value: 3,
      label: "第三季度",
    },
    {
      value: 4,
      label: "第四季度",
    },
  ],
});

let nowYear = moment().format("YYYY"); //当前年
let nowSeason = moment().quarter(); // 当前季度
let nowMonth = moment().format("MM"); // 当前月
let nowDate = moment().startOf("day").format("YYYY-MM-DD"); // 当前日期
let befDate = moment().subtract(1, "day").format("YYYY-MM-DD"); // 前一天

// 年：控制当前日期前的不能选择
const pickerOptions = (time) => {
  const timedate = moment(time).format("YYYY-MM-DD");
  return moment(nowDate).isBefore(timedate);
};

//清除开始季度禁止选择
const clearStarSeaonOpt = () => {
  seasonOpt.startSeasonOpt.forEach((item) => {
    item.disabled = false;
  });
};
//清除结束季度禁止选择
const clearendSeaonOpt = () => {
  seasonOpt.endSeasonOpt.forEach((item) => {
    item.disabled = false;
  });
};
//年发生变化时清楚开始结束季度值，并且清楚开始季度的禁止选择项
const seasonFilterZone = () => {
  startSeason.value = "";
  endSeason.value = "";
  clearStarSeaonOpt();
};
//开始季度的季度选项控制在当前季度及其之前
const seasonFilterOne = () => {
  let currYear = moment(startTime.value).format("YYYY");
  if (currYear == nowYear) {
    seasonOpt.startSeasonOpt.forEach((item) => {
      if (item.value > nowSeason) {
        item.disabled = true;
      }
    });
    seasonOpt.endSeasonOpt.forEach((item) => {
      if (item.value > nowSeason) {
        item.disabled = true;
      }
    });
  } else {
    seasonOpt.startSeasonOpt.forEach((item) => {
      item.disabled = false;
    });
    seasonOpt.endSeasonOpt.forEach((item) => {
      item.disabled = false;
    });
  }
};
//开始季度改变时，开始季度新值如果在结束季度之后则清楚结束季度值
const changeFilterOne = (val) => {
  if (val > endSeason.value) {
    endSeason.value = "";
    //  clearendSeaonOpt()
  }
};
// 结束季度必须在开始季度之后
const seasonFilter = () => {
  seasonOpt.endSeasonOpt.forEach((item) => {
    if (startSeason.value > item.value) {
      item.disabled = true;
    }
  });
};

//点击统计时获取季度值
let data = {
 	oneTime: "",
 	twoTime: "",
};
if (startTime.value == undefined || startTime.value == "") {
	 ElMessage.warning("请选择时间");
	 return;
	} else if (startSeason.value == undefined || startSeason.value == "") {
	 ElMessage.warning("请选择开始季度");
	 return;
	} else {
	 let checkYear = moment(startTime.value).format("YYYY"); // 选中年
	 let checkStr = getSeaon(startSeason.value); // 选中季度开始月
	 let checkSym = checkYear + "-" + checkStr; // 选中开始年月
	
	 if (endSeason.value) {
		   // 有结束季度
		   data.oneTime = moment(checkSym).startOf("quarter").format("YYYY-MM-DD");
		   let checkEym = checkYear + "-" + getSeaon(endSeason.value);
		   if (checkYear == nowYear) {
		     if (nowSeason == startSeason.value || nowSeason == endSeason.value) {
		       data.twoTime = befDate;
		     }
		   } else {
		     data.twoTime = moment(checkEym).endOf("quarter").format("YYYY-MM-DD");
		   }
		   if (endSeason.value == startSeason.value) {
		     dateStr.startTime =
		       checkYear +
		       "年度-" +
		       seasonOpt.startSeasonOpt[startSeason.value - 1]?.label;
		   } else {
		     dateStr.startTime =
		       checkYear +
		       "年度-" +
		       seasonOpt.startSeasonOpt[startSeason.value - 1]?.value +
		       "~" +
		       seasonOpt.endSeasonOpt[endSeason.value - 1]?.value +
		       "季度";
		   }
	 } else {
		   // 无结束季度
		   data.oneTime = moment(checkSym).startOf("quarter").format("YYYY-MM-DD");
		   if (checkYear == nowYear) {
		     if (nowSeason == startSeason.value) {
		       data.twoTime = befDate;
		     }
		   } else {
		     data.twoTime = moment(checkSym).endOf("quarter").format("YYYY-MM-DD");
		   }
		   dateStr.startTime =
		     checkYear +
		     "年度-" +
		     seasonOpt.startSeasonOpt[startSeason.value - 1]?.label;
	}
	
 console.log("季度-参数", data);
 // ElMessage.warning("di-1");
}