element选择周日期不跨月

选择任意一天，自动返回所在周的起始日期，起始日期不跨月
1.使用element日期选择器组件
2.需要安装依赖 - moment

<template><div class="app-container" style=" height: 100% " ref="appContainer"><el-date-picker :firstDayOfWeek='1' v-model="weekInfo.data" type="date" :format="yyyy-MM-dd" placeholder="选择周" style="width:250px" size="samll"@change='changeWeek' :clearable='false' :editable='false' :picker-options="pickerOptionsOfWeek"></el-date-picker></div>
</template><script>
export default {name: "weeklyPlanQuery",data() {return {weekInfo: {data: "",weekStartDay: "",weekEndDay: "",showInfo: null,dataList: [],},pickerOptionsOfWeek: {// 自定义周选择器配置firstDayOfWeek: 1,cellClassName: (time) => {let timeDate = this.$moment(time.getTime()).format("yyyy-MM-DD");let list = this.weekInfo.dataList;if (list.includes(timeDate)) {if (timeDate == list[0]) {return "in-range start-date"; // 开始日期} else if (timeDate == list[list.length - 1]) {return "in-range end-date"; // 结束日期} else {return "in-range"; // 中间日期}}},},};},created() {this.changeWeek(nextWeek);},methods: {// 选择日期changeWeek(e) {this.changeWeekOfMonth(e).then((res) => {this.weekInfo = res;this.queryParams.planDate = res.weekStartDay;this.queryParams.planStartDate = res.weekStartDay;this.queryParams.planEndDate = res.weekEndDay;});},// 根据所选日期计算所在周起始时间changeWeekOfMonth(e) {let chooseTime = this.dateFormat(e).split("-");let weekOfDay = this.$moment(e).format("E"); // 所选日期是周几let day = this.$moment(e).format("DD"); // 所选日期天let totalDay = new Date(chooseTime[0], chooseTime[1], 0).getDate(); // 所选日期所在月的总天数let mondayNum = weekOfDay - 1;let sundayNum = 7 - weekOfDay;if (weekOfDay - day > 0) {mondayNum = day - 1;}if (totalDay - day < sundayNum) {sundayNum = totalDay - day;}let chooseFirstDay = this.$moment(e).subtract(mondayNum, "days").format("YYYY-MM-DD");let chooseLastDay = this.$moment(e).add(sundayNum, "days").format("YYYY-MM-DD");let weekInfo = {data: this.dateFormat(e),showInfo: chooseFirstDay + " 至 " + chooseLastDay,weekStartDay: chooseFirstDay,weekEndDay: chooseLastDay,dataList: this.formatEveryDay(chooseFirstDay, chooseLastDay),};return new Promise((resolve, reject) => {resolve(weekInfo);});},formatEveryDay(start, end) {let dateList = [];var startTime = this.getDateFun(start);var endTime = this.getDateFun(end);while (endTime.getTime() - startTime.getTime() >= 0) {var year = startTime.getFullYear();var month =startTime.getMonth() + 1 < 10? "0" + (startTime.getMonth() + 1): startTime.getMonth() + 1;var day =startTime.getDate().toString().length == 1? "0" + startTime.getDate(): startTime.getDate();dateList.push(year + "-" + month + "-" + day);startTime.setDate(startTime.getDate() + 1);}return dateList;},},
};
</script>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！