要求:
1.样式:如图
2.点击向右图标,获取下15天日期;点击向左图标,获取上15天日期,今天背景色为橘色1,点击某天日期背景色为蓝色,已填报日期为绿色
3.今天之后的日期不能被点击,5月,2024年这种也不能点击
代码如下:
1.使用组件:
父组件:fillDateList为已填报的日期数组集合,getCheckDate方法可获取为所点击的日期
<HorizontalDate
:fillDateList="fillDateList"
@getCheckDate="getCheckDate"
class="topDate"
/>
子组件:
<template>
<div class="bg-[#fff] w-[80%] h-[60px] container">
<div class="flex justify-start align-center w-full h-full">
<div
class="borderClass flex justify-center align-center w-[30px]"
style="align-items: center"
>
<i
class="fks-icon-arrow-left"
style="font-size: 40px; font-weight: 900"
@click="arrowClick('prev')"
></i>
</div>
<div
class="dateClass borderClass w-[70px] flex justify-center align-center"
style="align-items: center"
v-for="(item, index) in dateList"
:key="index + item"
:class="getStyleByDate(item)"
@click="handleDateClick(item)"
>
<div class="flex flex-col justify-center align-center">
<span class="mb-[5px]">{{ item | formatMonth }}</span>
<span class="text-[20px]">{{ item | formatDate }}</span>
</div>
</div>
<div
class="borderClass lastClass flex justify-center align-center w-[30px]"
style="align-items: center"
>
<i
class="fks-icon-arrow-right"
style="font-size: 40px; font-weight: 900"
@click="arrowClick('next')"
></i>
</div>
</div>
</div>
</template>
<script>
import dayjs from "dayjs";
export default {
data() {
return {
dateList: [],
// 当前选中日期
currentSelectDate: "",
};
},
props: {
fillDateList: {
type: Array,
default() {
return [];
},
},
},
mounted() {
this.init();
},
filters: {
formatMonth(value){
if (value.length < 10) {
return '';
} else {
return dayjs(value).format("MM月");
}
},
formatDate(value) {
if (value.length < 10) {
return value;
} else {
return dayjs(value).format("DD日");
}
},
},
methods: {
// 获取最近十五天的日期列表
init() {
const dateList = [];
const now = dayjs();
for (let i = 1; i < 8; i++) {
const date = now.clone().subtract(i, "day").format("YYYY-MM-DD");
dateList.push(date);
}
for (let i = 0; i < 8; i++) {
const date = now.clone().add(i, "day").format("YYYY-MM-DD");
dateList.push(date);
}
this.handleDateList(dateList);
},
// 箭头点击
arrowClick(type) {
let start = "";
const arr = [];
let index = 0;
if (type === "next") {
//2024年4月20日,长度为10,不能去最后一个和第一个,因为可能是2月,2024年这种,就不能取到下15天或者上15天了
index = this.dateList.findLastIndex((item) => item.length === 10);
} else {
index = this.dateList.findIndex((item) => item.length === 10);
}
start = this.dateList[index];
for (let i = 1; i < 16; i++) {
if (type === "next") {
const date = dayjs(start).add(i, "days").format("YYYY-MM-DD");
arr.push(date);
} else {
const date = dayjs(start).subtract(i, "day").format("YYYY-MM-DD");
arr.push(date);
}
}
this.handleDateList(arr);
},
// 处理日期
handleDateList(list) {
list = list.sort((a, b) => new Date(a) - new Date(b));
const arr = [];
// 判断是为月的最后一天 年的最后一天
list.forEach((item) => {
arr.push(item);
const lastMonthDay = dayjs(item).endOf("month").format("YYYY-MM-DD");
const lastYearDay = dayjs(item).endOf("year").format("YYYY-MM-DD");
if (lastYearDay === item) {
let year = dayjs(item).format("YYYY");
year = Number(year) + 1;
arr.push(`${year}`);
}
if (lastMonthDay === item) {
let month = dayjs(item).format("MM");
month = Number(month) + 1;
arr.push(`${month === 13 ? 1 : month}月`);
}
});
this.dateList = arr;
},
getStyleByDate(date) {
let spanClass = "";
// 判断是否为今天
const today = dayjs().format("YYYY-MM-DD");
if (date === today && date !== this.currentSelectDate) {
spanClass = "toDayClass";
} else if (date === this.currentSelectDate) {
spanClass = "clickClass";
} else if (this.fillDateList.includes(date)) {
spanClass = "fillClass";
}
return spanClass;
},
handleDateClick(date) {
if (date.length < 10) return
const todayDate = dayjs().format("YYYY-MM-DD");
const todayTimes = new Date(todayDate)
const currentTimes = new Date(date)
if(todayTimes >= currentTimes){
this.currentSelectDate = date;
this.$emit("getCheckDate", date);
}
},
},
};
</script>
<style lang="scss" scoped>
.container {
.borderClass {
border: 1px solid #000;
border-right: 0;
}
.lastClass {
border: 1px solid #000;
}
.dateClass:hover {
cursor: pointer;
}
.toDayClass {
background: #eaab85;
}
.clickClass {
background: #435bc8;
color: white;
}
.fillClass {
background: #74ba68;
}
}
</style>