基于VUE实现日历组件,供大家参考,具体内容如下
年和月份是使用输入框来切换的,没有做成选择框,⬅️和➡️切换月份,红色选取是选取的日期
实现思路和网上的大多数一样,首先是把月份的天数存进一个数组,
monthDay:[31,'',31,30,31,30,31,31,30,31,30,31],
由于二月的天数是不确定的,所以就先设置为空
然后去求选择的月份的第一天是星期几,通过 Date.getDay()函数,这个函数有一个注意事项,就是如果是星期天,他会返回0,这需要我们自己去处理一下
图中,2019年1月1号是星期二,所以前面就要给它一个空格块
下面代码中第一层循环就是在循环空格块,spaceDay表示需要几个空格
<p v-for="item in spaceDay" :key="item.id"></p> <p v-for="(item,idx) in (monthDay[this.month-1] || 30)" @click="setDay(idx)" :class="idx==activeDay?'active':''" :key="item.id">{{item}}</p>
下面贴出完整代码
<template> <div id="calender"> <div class="txt-c p-10"> <span @click="prev"> ⬅️ </span> <input type="text" v-model="year">年 <input type="text" v-model="month" class="month">月 <span @click="next"> ➡️️️️ </span> </div> <div class="weekDay flex jc-sb p-5 day" > <p v-for="item in weekList" :key="item.id">{{item}}</p> </div> <div class="weekDay flex p-5 day"> <p v-for="item in spaceDay" :key="item.id"></p> <p v-for="(item,idx) in (monthDay[this.month-1] || 30)" @click="setDay(idx)" :class="idx==activeDay?'active':''" :key="item.id">{{item}}</p> </div> </div> </template> <script> export default { name: "calender", data(){ return{ year: '', // 年份 month: '', // 月份 day: '', // 天数 current: '', // 当前时间 weekList:['周一','周二','周三','周四','周五','周六','周日'], monthDay:[31,'',31,30,31,30,31,31,30,31,30,31], activeDay: '', // 选中的日期 spaceDay: '', // 每个月第一天是星期几 February:'' // 判断2月份的天数 } }, created(){ this.current = new Date() this.getTheCurrentDate() this.getMonthFisrtDay() this.February = this.isLeapYear(this.year) ? 28 : 29 this.monthDay.splice(1,1,this.February) }, watch:{ month(){ if(this.month>12||this.month<1){ console.log('请输入正确月份') return } this.getMonthFisrtDay() }, year(){ this.getMonthFisrtDay() } }, methods:{ // 判断是否是闰年 isLeapYear(year){ return year % 4 == 0 && year % 100 != 0 ||year % 400 == 0; }, // 选取特定天数 setDay(idx){ this.activeDay = idx this.day = idx + 1 console.log('选择的日期是'+this.year+' '+this.month+' '+this.day) }, // 判断月份的第一天是星期几 getMonthFisrtDay(){ var firstDayOfCurrentMonth = new Date(this.year,this.month-1,1) // 某年某月的第一天 if(firstDayOfCurrentMonth.getDay() == 0){ this.spaceDay = 6 } else { this.spaceDay = firstDayOfCurrentMonth.getDay() - 1 } }, // 获取当前的日期 getTheCurrentDate(){ this.year = this.current.getFullYear() this.month = this.current.getMonth() + 1 this.day = this.current.getDate() }, prev(){ if(this.month==1){ this.year-- this.month=12 }else{ this.month-- } this.activeDay = 0 this.getMonthFisrtDay() }, next(){ if(this.month==12){ this.year++ this.month=1 }else{ this.month++ } this.activeDay = 0 this.getMonthFisrtDay() } } } </script> <style lang="scss" scoped> #calender{ .txt-c{ text-align: center; } .p-10{ padding: 2rem; } .p-5{ padding: 1rem; } .flex { display: flex; } .jc-sb{ justify-content: space-between; } input{ width: 50px; &.month{ width: 30px; } } .day{ flex-wrap: wrap; p{ width: 14.28%; /*flex: 0 0 0 ;*/ text-align: center; line-height: 2.4rem; height: 2.4rem; position: relative; z-index: 100; &.active{ color: #fff; } &.active:before{ content: ''; height: 2.5rem; width: 2.5rem; position: absolute; z-index: -1; left: 0; top: 0; transform: translateX(50%); border-radius: 50%; background: #e97163; color: #fff; } } } } </style>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。