Vue+Vant实现7天日历展示，并在切换日期时实时变换

效果图：

主要使用 moment.js 插件完成

HTML部分

        <div class="day-content">
            <div class="day-content-t">
                <div>{{ monthVal }}</div>
                <div @click="onCalendar()">更多>></div>
            </div>
            <div class="day-content-b">
                <div class="day-week">
                    <div v-for="item in weekList">{{ item }}</div>
                </div>
                <div class="day-list">
                    <div v-for="item in dayList" :class="{ 'active' : todayVal === item }">{{ item }}</div>
                </div>
            </div>
        </div>
        <!-- 日历 -->
        <van-calendar v-model="calendarShow" :show-confirm="false" @confirm="onConfirm" color="#007AFF" />

js部分

<script>
import moment from 'moment';
export default {
    components: {},
    data() {
        return {
            weekList: [],
            dayList: [],
            monthVal: '',
            todayVal: '',
            calendarShow: false,
        }
    },
    created() {
        this.monthVal = moment().format('YYYY年MM月');
        let month = moment().format('YYYY-MM-DD');
        this.todayVal = moment().format('DD');
        this.dayInit(month,this.todayVal);
    },
    methods: {
        dayInit(month,day){
            this.weekList = [];
            this.dayList = [];
            // 初始化周
            const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
            const todayWeek = weekDays[moment(month).day()];
            const frontWeek1 = weekDays[moment(month).subtract(3, 'days').day()];
            const frontWeek2 = weekDays[moment(month).subtract(2, 'days').day()];
            const frontWeek3 = weekDays[moment(month).subtract(1, 'days').day()];
            const afterWeek1 = weekDays[moment(month).add(1, 'days').day()];
            const afterWeek2 = weekDays[moment(month).add(2, 'days').day()];
            const afterWeek3 = weekDays[moment(month).add(3, 'days').day()];
            this.weekList.push(frontWeek1,frontWeek2,frontWeek3,todayWeek,afterWeek1,afterWeek2,afterWeek3);
            // 初始化日期
            const today = day;
            const frontDay1 = moment(month).subtract(3, 'days').format('DD');
            const frontDay2 = moment(month).subtract(2, 'days').format('DD');
            const frontDay3 = moment(month).subtract(1, 'days').format('DD');
            const afterDay1 = moment(month).add(1, 'days').format('DD');
            const afterDay2 = moment(month).add(2, 'days').format('DD');
            const afterDay3 = moment(month).add(3, 'days').format('DD');
            this.dayList.push(frontDay1,frontDay2,frontDay3,today,afterDay1,afterDay2,afterDay3);
        },
        onCalendar(){
            this.calendarShow = true;
        },
        formatDate(date) {
            this.monthVal = `${date.getFullYear()}年${date.getMonth() + 1}月`;
            let month = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
            this.todayVal = date.getDate();
            this.dayInit(month,this.todayVal);
        },
        onConfirm(date){
            this.calendarShow = false;
            this.formatDate(date)
        },
    }
}
</script>

css部分

<style lang="scss" scoped>
.day-content{
    background-color: #007AFF;
    padding: 0.3rem;
    color: #fff;
    .day-content-t{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        div:nth-child(1){
            font-size: 16px;
        }
        div:nth-child(2){
            font-size: 12px;
        }
    }
    .day-content-b{
        .day-week,.day-list{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin: 0.4rem 0;
            div{
                text-align: center;
                width: 0.6rem;
                height: 0.6rem;
                line-height: 0.6rem;
            }
        }
        .active{
            background-color: #0054B0;
            border-radius: 50%;
        }
    }
}
</style>

至此完成！！！

测试有效！！！感谢支持！！！

原文地址：https://blog.csdn.net/qq_38543537/article/details/142824392

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！