vue2+uniApp+uview封装日期选择器(自动对齐星期)_uniapp uview calender

• 先看实现效果

显示当前选中日期的一周

展开显示当月

左右滑动可以切换上下周，顶部切换年月

• 组件功能：

在小程序/APP中，部分页面需要用户切换日期来实现数据请求，该组件可实现切换年月日，日期与星期匹配，返回一个YYYY-MM-DD的数据，这里我组装成了{year:YYYY, month:MM, day:DD}的格式。

• 上代码

子组件：CustomCalendar.vue

图标使用的是uview的u-icon，你们可以自己替换想要的png都行

 
<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>

父组件：

 
// 在父组件合适的位置引入即可
<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>