-
先看实现效果
显示当前选中日期的一周
展开显示当月
左右滑动可以切换上下周，顶部切换年月
-
组件功能：
在小程序/APP中，部分页面需要用户切换日期来实现数据请求，该组件可实现切换年月日，日期与星期匹配，返回一个YYYY-MM-DD的数据，这里我组装成了{year:YYYY, month:MM, day:DD}的格式。
-
上代码
子组件：CustomCalendar.vue
图标使用的是uview的u-icon，你们可以自己替换想要的png都行文章来源：https://www.toymoban.com/news/detail-531138.html
<template>
<view class="custom-calendar">
<view class="title">
<u-icon name="arrow-left" color="#8F9BB3" size="32rpx" class="left" @click="lastMonth"></u-icon>
{{year}}年{{month<10?'0'+month:month}}月
<u-icon name="arrow-right" color="#8F9BB3" size="32rpx" class="right" @click="nextMonth"></u-icon>
</view>
<view class="week">
<view class="week-item" v-for="(item,index) in weekArr" :key="index">
{{item}}
</view>
</view>
<template v-if="!showAll">
<swiper class="swiper" :current="swiperCurrent">
<swiper-item v-for="item in daysArr" :key="item.id">
<view class="day-wrap">
<view :class="['day-item',{'active':current === i.value}]" v-for="i in item.arr" :key="i.id"
@click="selectDate(i.value)">
<text class="day">{{i.value}}</text>
</view>
</view>
</swiper-item>
</swiper>
</template>
<template v-else>
<view class="day-wrap" v-for="item in daysArr" :key="item.id">
<view :class="['day-item',{'active':current === i.value}]" v-for="i in item.arr" :key="i.id"
@click="selectDate(i.value)">
<text class="day">{{i.value}}</text>
</view>
</view>
</template>
<view class="more">
<u-icon :name="!showAll?'arrow-down':'arrow-up'" size="40" @click="switchShowMode" color="#8F9BB3"></u-icon>
</view>
</view>
</template>
<script>
export default {
data() {
return {
// false展示一行 true展示所有
showAll: false,
// 年
year: "",
// 月
month: "",
// 日
day: "",
swiperCurrent: 0,
// 星期几
weekday: 1,
// 每天
daysArr: [],
// 当前选中
current: 1,
weekArr: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
},
created() {
this.init();
},
methods: {
// 选择日期
selectDate(val) {
if (!val) return;
this.current = val;
//这里我组装成了{year:YYYY, month:MM, day:DD}的格式
//你们可以自己返回想要的数据格式
this.$emit('current',{
year:this.year,
month:this.month,
day:this.current,
})
},
// 切换显示模式
switchShowMode() {
this.showAll = !this.showAll;
this.getSwiperCurrent();
},
// 获取当前Swiper Current
getSwiperCurrent() {
this.swiperCurrent = this.daysArr.findIndex((item) => {
return item.arr.some(i => i.value === this.current);
});
},
// 初始化
init() {
let now = new Date();
this.year = now.getFullYear();
this.month = now.getMonth() + 1;
this.day = now.getDate();
this.current = this.day;
//这里我组装成了{year:YYYY, month:MM, day:DD}的格式
//你们可以自己返回想要的数据格式
this.$emit('current',{
year:this.year,
month:this.month,
day:this.current,
})
this.changeData();
this.getSwiperCurrent();
},
// 获取当前星期几
getWeekday(year, month) {
let date = new Date(`${year}/${month}/01 00:00:00`);
return date.getDay() === 0 ? 7 : date.getDay();
},
//一个月有多少天
getMonthDay(year, month) {
let days = new Date(year, month, 0).getDate();
return days;
},
// 切换日期 该函数逻辑完善不建议改动 但可精简优化
changeData() {
this.day = this.getMonthDay(this.year, this.month);
this.weekday = this.getWeekday(this.year, this.month);
let daysArr = this.generateArray(1, this.day)
for (let i = 0; i < this.weekday - 1; i++) {
daysArr.unshift("")
}
let arr = [];
daysArr.map((item, index) => {
if (index !== 0 && index % 7 === 0) {
if (index === daysArr.length - 1) {
this.daysArr.push({
id: this.$u.guid(),
arr
});
arr = [];
arr.push({
id: this.$u.guid(),
value: item
});
this.daysArr.push({
id: this.$u.guid(),
arr
});
if (arr.length !== 7) {
const len = arr.length
for (let i = 0; i < 7 - len; i++) {
arr.push("")
}
}
} else {
this.daysArr.push({
id: this.$u.guid(),
arr
});
arr = [];
arr.push({
id: this.$u.guid(),
value: item
});
}
} else if (index === daysArr.length - 1) {
arr.push({
id: this.$u.guid(),
value: item
});
if (arr.length !== 7) {
const len = arr.length
for (let i = 0; i < 7 - len; i++) {
arr.push("")
}
}
this.daysArr.push({
id: this.$u.guid(),
arr
});
} else {
arr.push({
id: this.$u.guid(),
value: item
});
}
});
this.daysArr = this.daysArr
},
generateArray: function(start, end) {
return Array.from(new Array(end + 1).keys()).slice(start);
},
// 上一月
lastMonth(){
if (this.month==1) {
this.month = 12
this.year = this.year-1
}else{
this.month = this.month-1
}
this.day = 1
this.daysArr = []
this.changeData()
this.showAll = true
},
//下一月
nextMonth(){
if (this.month==12) {
this.month = 1
this.year = this.year+1
}else{
this.month = this.month+1
}
this.day = 1
this.daysArr = []
this.changeData()
this.showAll = true
}
}
}
</script>
<style scoped lang="scss">
.custom-calendar {
background-color: #FFFFFF;
position: sticky;
top: 0;
/* #ifdef H5 */
top: 44px;
/* #endif */
z-index: 99;
padding: 0 20rpx;
.title {
padding: 20rpx 32rpx;
text-align: center;
font-weight: bold;
.left{
padding: 10rpx;
margin-right: 30rpx;
background-color: #E4F0FC;
border-radius: 8rpx;
}
.right{
padding: 10rpx;
margin-left: 30rpx;
background-color: #E4F0FC;
border-radius: 8rpx;
}
}
.week {
display: flex;
align-items: center;
text-align: center;
.week-item {
flex: 1;
}
}
.day-wrap {
display: flex;
.day-item {
display: flex;
justify-content: center;
flex: 1;
padding: 10rpx 0;
flex-direction: column;
text-align: center;
border-radius: 8rpx;
.day {
font-weight: bold;
}
.num {
font-size: 24rpx;
color: #8F9BB3;
transform: scale(.8);
}
&.active {
background-color: #0676ED;
color: #FFFFFF;
.num {
color: #FFFFFF;
}
}
}
}
.swiper {
height: 60rpx !important;
}
.more {
text-align: center;
}
}
</style>父组件：文章来源地址https://www.toymoban.com/news/detail-531138.html
// 在父组件合适的位置引入即可
<template>
<view class="header">
<CustomCalendar @current="getday"></CustomCalendar>
</view>
</template>
<script>
import CustomCalendar from './components/CustomCalendar.vue'
export default {
methods: {
//获取子组件的天
getday(item){
console.log(item,"获取到的日期数据");
// 格式为：{year:YYYY, month:MM, day:DD}
}
}
}
</script>到了这里，关于uniApp封装日期选择器(自动对齐星期)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
