还是展示下成品效果
image.png
懒得解释了，直接丢源码吧
里面有个农历的js文件，发私信找我索取
<template>
<div class="rili">
<div class="change">
<span>
<el-button @click="changeMonthFun(1)">上月</el-button>
</span>
<el-date-picker :clearable="false" v-model="date" style="width: 120px;" @change="handleChange" type="month" placeholder="选择年月">
</el-date-picker>
<el-button @click="changeMonthFun(2)">下月</el-button>
</div>
<div class="rili_mouth">
<!--components/xx-calendar/xx-calendar.wxml-->
<!-- 头部 -->
<div class="title-wrap">
<div class="week">
<span v-for="(item, index) in weeksArr" :key="index">{{ item }}</span>
</div>
</div>
<!-- 日期 -->
<div class="date-wrap">
<!-- 上个月日期 -->
<div class="mouth-date last-mouth" v-for="(item, index) in lastMonthDays" :key="index + 'a'">
<span class="day-span">{{ item.date }}</span>
<span class="day-nongli">十五</span>
<span class="day-dot"></span>
</div>
<!-- 当月日期 -->
<div class="mouth-date current-mouth" v-for="(item, index) in nowMonthDays" :key="index"
@click="selectDate(item)">
<div class="day-box" :class="item.restDay ? 'active' : ''">
<span class="day-span">{{ item.date }}</span>
<span class="day-nongli">{{ item.day }}</span>
<span class="tip" v-if="item.restDay">休</span>
<span class="tip" v-else>班</span>
</div>
</div>
<!-- 下个月日期 -->
<div class="mouth-date next-mouth" v-for="(item, index) in nextMonthDays" :key="index + 'b'">
<span class="day-span">{{ item.date }}</span>
<span class="day-nongli">十五</span>
<span class="day-dot"></span>
</div>
</div>
</div>
</div>
</template>
<script>
import calendarFormatter from "@/utils/calendar";
export default {
data() {
return {
restDayArr:[],
year: new Date().getFullYear(),
month: new Date().getMonth() + 1,
date: new Date().getFullYear() + '-' + (new Date().getMonth() + 1),
weeksArr: ['日', '一', '二', '三', '四', '五', '六'],
nowMonth: new Date().getMonth() + 1, //本月是几月
nowDay: new Date().getDate(), //本月当天的日期
lastMonthDays: [], //上一个月
nowMonthDays: [], //本月
nextMonthDays: [], //下一个月
}
},
methods: {
handleChange(val) {
this.year = val.getFullYear()
this.month = val.getMonth() + 1
this.date = this.year + '-' + this.month
console.log(this.date);
this.createDays(this.year,this.month)
this.getRestDays(this.year,this.month)
},
//获取当月天数
getThisMonthDays(year, month) {
return new Date(year, month, 0).getDate();
},
/** 总方法 */
//创建日期
createDays(year, month) {
this.getLastMonthDays(year, month)
this.getNowMonthDays(year, month)
this.getNextMonthDays(year, month)
},
/** 获取上个月日期 */
getLastMonthDays(year, month) {
let nowMonthFirstDays = new Date(year, month - 1, 1).getDay()
let lastMonthDays = []
if (nowMonthFirstDays) { //判断当月的第一天是不是星期天
//上个月显示多少天
let lastMonthNums = month - 1 < 0 ? this.getThisMonthDays(year - 1, 12) : this.getThisMonthDays(year, month - 1); //判断是否会跨年
//上个月从几号开始显示
for (let i = lastMonthNums - nowMonthFirstDays + 1; i <= lastMonthNums; i++) {
let time = new Date(year, month - 2, i).toLocaleDateString() //对应的时间
lastMonthDays.push({
date: i, //几号
week: this.weeksArr[new Date(year, month - 2, i).getDay()], //星期几
time,
isNowMonthDay: ''
});
}
}
this.lastMonthDays = lastMonthDays
console.log(this.lastMonthDays);
},
/** 获取当月日期 */
getNowMonthDays(year, month) {
let nowMonthDays = []
let days = this.getThisMonthDays(year, month); //获取当月的天数
for (let i = 1; i <= days; i++) {
let d = new Date(year, month - 1, i)
let years = d.getFullYear()
let months = d.getMonth() + 1
let day2 = d.getDate()
let time = `${years + '/' + months + '/' + day2}` // 2023/3/3
let timer = time.replace(/\//g, "-")
let timer2 = timer.split('-')
var day = calendarFormatter.solar2lunar(timer2[0], timer2[1], timer2[2]);
let newdate
if (day.IDayCn == '初一') {
newdate = day.IMonthCn
} else {
newdate = day.IDayCn
}
nowMonthDays.push({
date: i, //几号
week: this.weeksArr[new Date(year, month - 1, i).getDay()], //星期几
time,
restDay: false,
day: newdate,
});
}
this.nowMonthDays = nowMonthDays
console.log(nowMonthDays);
},
/** 获取下个月日期 */
getNextMonthDays(year, month) {
let {
lastMonthDays,
nowMonthDays,
} = this
let nextMonthDays = []
let nextMonthNums = (lastMonthDays.length + nowMonthDays.length) > 35 ? 42 - (lastMonthDays.length + nowMonthDays.length) : 35 - (lastMonthDays.length + nowMonthDays.length) //下个月显示多少天
let nowYear = (parseInt(month) + 1) > 12 ? year + 1 : year //下一个月的年份
let nowMonth = (parseInt(month) + 1) > 12 ? 1 : parseInt(month) + 1 //下一个月的月份
if (nextMonthNums) { //判断当前天数是否大于零
for (let i = 1; i <= nextMonthNums; i++) {
let time = new Date(year, month, i).toLocaleDateString()
nextMonthDays.push({
date: i, //几号
week: this.weeksArr[new Date(nowYear, nowMonth - 1, i).getDay()], //星期几
time,
isNowMonthDay: ''
});
}
}
this.nextMonthDays = nextMonthDays
console.log(nextMonthDays)
},
/** 切换月份 */
changeMonthFun(e) {
let {
year,
month
} = this
let type = e //类型
if (type == 1) { //上一个月
year = month - 1 > 0 ? year : year - 1
month = month - 1 > 0 ? month - 1 : 12
} else { //next 下个月
year = (parseInt(month) + 1) > 12 ? year + 1 : year
month = (parseInt(month) + 1) > 12 ? 1 : parseInt(month) + 1
}
this.year = year
this.month = month
this.createDays(year, month)
this.getRestDays(year,month)
},
selectDate(item) {
let date = item.time //选择的下标
item.restDay = !item.restDay
let selectDate = date.replace(/\//g, "-")
console.log("选择的时间", selectDate)
},
dislodgeZero(str) {
let strArray = str.split("-");
strArray = strArray.map(function (val) {
if (val[0] == "0") {
return (val = val.slice(1));
} else {
return val;
}
});
return strArray.join("-");
},
getRestDays(year, month) {
const restDays = [];
// 获取当月第一天和最后一天的日期对象
const firstDayOfMonth = new Date(year, month - 1, 1);
const lastDayOfMonth = new Date(year, month, 0);
// 循环处理每一天，判断是否为休息日（周六、周日）
for (let day = 1; day <= lastDayOfMonth.getDate(); day++) {
const date = new Date(year, month - 1, day);
const dayOfWeek = date.getDay();
if (dayOfWeek === 0 || dayOfWeek === 6) {
// 如果是周六或周日，则将其加入到休息日数组中
const formattedDate = `${year}-${month}-${day.toString().padStart(2, '0')}`;
restDays.push(formattedDate);
}
}
console.log(restDays);
this.restDayArr = restDays
}
},
mounted() {
this.createDays(this.year, this.month);
this.getRestDays(2023,5)
},
watch: {
restDayArr(newValue, oldValue) {
newValue.forEach(ele => {
ele = this.dislodgeZero(ele).replace(/\-/g, "/")
this.nowMonthDays.forEach(item => {
if (ele == item.time) {
item.restDay = true
}
})
})
}
},
}
</script>
<style lang="scss" scoped>
.rili {
border: 1px solid #2ba389;
background: #eee;
flex: 1;
max-width: 544px;
// min-height: 440px;
border-radius: 12px;
display: flex;
flex-direction: column;
.change {
display: flex;
justify-content: space-around;
padding: 10px 0;
}
.rili_mouth {
border-top: 1px solid #2ba389;
border-radius: 16px;
flex: 1;
background: #fff;
padding-bottom: 12px;
/* 头部样式start */
.week {
display: flex;
justify-content: space-around;
font-size: 14px;
color: #1F1F1F;
padding: 15px 0 10px 0;
}
/* 头部样式end */
/* 日期区域样式start */
.date-wrap {
display: flex;
flex-wrap: wrap;
}
.mouth-date {
display: flex;
font-size: 16px;
flex-direction: column;
align-items: center;
width: calc(100% / 7);
padding-top: 10px;
padding-bottom: 10px;
cursor: pointer;
}
.last-mouth span,
.next-mouth span {
opacity: 0;
}
.mouth-date .day {
display: flex;
flex-direction: column;
align-items: center;
color: #1F1F1F;
}
.mouth-date .day-nongli {
font-size: 12px;
color: #888888;
margin: 3px 0 6px 0;
}
.tip {
font-size: 12px;
position: absolute;
top: 0;
right: 0;
background: #4b9ef2;
color: #fff;
padding: 2px;
border-radius: 3px;
}
.mouth-date .color {
color: #8096F0;
}
.mouth-date .day-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #8096F0;
}
.mouth-date .day-box {
border-radius: 6px;
padding: 8px 17px;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
font-size: 16px;
min-width: 58px;
}
.mouth-date .active {
background-color: #f7d0cf;
}
.mouth-date .active span.tip {
color: #fff;
background: red;
}
.mouth-date .active span.day-span {
color: red;
font-weight: bold;
}
.mouth-date .active .day-nongli {
color: red;
}
}
}
</style>
网友评论