<template>
<div class="flex justify-between">
<div class="bg-white" style="width: 66%">
<div class="flex items-center" style="color: #97abc2">
<!-- <el-tabs class="demo-tabs" v-model="activeName">
<el-tab-pane label="最新活动" disabled class="pl-2"></el-tab-pane>
</el-tabs> -->
<div class="py-3 px-4 text-lg flex align-center">
<span
class="iconfont icon-angle-double-left"
@click="monthFun(Number(format), year - 1)"
></span>
<span
class="iconfont icon-angle-left"
@click="
monthFun(
Number(format) > 1 ? Number(format) - 1 : 12,
Number(format) > 1 ? year : year - 1
)
"
></span>
<span class="text-black">{{ year }} / {{ format }}</span>
<span
class="iconfont icon-angle-right"
@click="
monthFun(
Number(format) < 12 ? Number(format) + 1 : 1,
Number(format) < 12 ? year : year + 1
)
"
></span>
<span
class="iconfont icon-angle-double-right"
@click="monthFun(Number(format), year + 1)"
></span>
</div>
</div>
<el-divider />
<div class="flex flex-wrap px-20 py-6">
<div
v-for="(item, index) in Number(endOf)"
:key="index"
:style="{
'background-color':
item == Number(start) || item == Number(over)
? '#396AFF'
: item > Number(start) && item < Number(over)
? '#D9E3FB'
: '',
color: item == Number(start) || item == Number(over) ? '#fff' : '',
}"
@click="dateFun(String(item))"
class="w-10 h-10 m-1 rounded-full flex justify-center items-center"
>
{{ item }}
</div>
</div>
<el-divider />
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, reactive, toRefs } from "vue";
import moment from "moment";
const activeName = ref<number>(1);
const year = ref<number>(moment().year()); // 年;
const format = ref<string>(moment().format("MM")); // 月
const startOf = moment(`${year.value}${format.value}`)
.startOf("month")
.format("DD");
const endOf = ref<string>(
moment(`${year.value}${format.value}`).endOf("month").format("DD")
);
const start = ref<string>(startOf);
const over = ref<string>(endOf.value);
// 日期范围判定
const dateFun = (num: string) => {
if (
Math.abs(Number(start.value) - Number(num)) <
Math.abs(Number(over.value) - Number(num))
) {
start.value = num;
} else {
over.value = num;
}
};
// end
// 年月切换
const monthFun = (num: number, num2: number) => {
format.value = `${num < 10 ? 0 : ""}` + String(num);
year.value = num2;
endOf.value = moment(`${year.value}${format.value}`)
.endOf("month")
.format("DD");
over.value = endOf.value;
};
// end
</script>
<style scoped lang="less">
:deep(.el-tabs__header) {
margin: 0;
padding-right: 16px;
}
:deep(.el-tabs__nav) {
height: 52px;
}
:deep(.el-tabs__item) {
height: 100%;
}
:deep(.el-tabs--top .el-tabs__item.is-top:nth-child(2)) {
padding: 0 16px;
background-color: #f5f5f5;
}
:deep(.el-divider--horizontal) {
margin: 0;
}
</style>
开始日期~结束日期
最新推荐文章于 2024-08-08 15:10:37 发布