vue3 实现一个简易版日历

在实现日历之前。我们需要对js中date对象的几个基本方法有所了解：

1 new Date().getDate ---》获取具体日期

2 new Date(year,month,date).getDay()-----》获取某年某月末某日是星期几（注意从0开始，0--》星期天，1星期一，依此内推）

3 new Date().getMonth()-----》获取当前的月份。注意月份是0-11. 0表示1月份，11表示12月份

先看一下基本效果：

首先我们看基本的结构

   <div id="wrap"><div class="head"><div class="left"><span class="prevY" @click="changeY('prev')">《</span><span class="prevM" @click.stop="changeM('prev')">◁</span></div><div class="title">当前日期:{{fullDate}}</div><div class="right"><span class="nextM" @click="changeM('next')">▷</span><span class="nextY" @click.stop="changeY('next')">》</span></div></div><div class=""><ul><li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li></ul><div class="list"><template v-for="item in state.dataCount" :key="item"><div class="block"><div :class="isCurrentDate(item)?'active':'' "  v-if="isCurrentDate(item)">{{item}}</div><div  v-else>{{filteredDate(item)}} <span class="dot" v-if="isShowDot(item)"></span></div></div></template></div></div></div>

我们最后的日期数据通过dataCount这个数组渲染出来，他是一个数字数组。

<script setup>
import { computed, onMounted, reactive, ref, toRaw, toRefs } from 'vue'let state=reactive({dataCount:[],//得到当前日期curYear:0,curMonth:0,curDate:0,signInList:[{date:"2022-9-10"},{date:"2022-9-11"},{date:"2022-9-12"},]
})let currentYEAR=null
let currentMONTH=nullonMounted(()=>{let date=new Date()state.curYear=date.getFullYear()state.curMonth=date.getMonth()state.curDate=date.getDate()//初始化执行getDayCounts(state.curYear,state.curMonth)currentYEAR=toRaw( state.curYear)currentMONTH=toRaw( state.curMonth)
})const fullDate= computed(()=>{return `${ state.curYear}-${state.curMonth+1}-${state.curDate}`
})//获取当月总天数
const getDayCounts=()=>{let counts=new Date(state.curYear,state.curMonth+1,0).getDate()//获取当前第一天是星期几let firstWeekDay=new Date(state.curYear,state.curMonth,1).getDay()console.log("state--:",state)console.log("firstweekday:",firstWeekDay)for(let i=1;i<=counts+firstWeekDay;i++){let val=i-firstWeekDay;// if(val>0 && val<counts){state.dataCount.push(val)// }}let res= state.dataCount;console.log(res)
}//更改年份
const changeY=(type)=>{state.dataCount=[];type=="prev"?state.curYear--:state.curYear++getDayCounts(state.curYear,state.curMonth)
}//更改月份
const changeM=(type)=>{state.dataCount=[];if(type=="prev"){state.curMonth--;if(state.curMonth==0){state.curMonth=11;state.curYear--}}else{state.curMonth++;if(state.curMonth==11){state.curMonth=0;state.curYear++}}console.log("state.curYear,state.curMont",state.curYear,state.curMonth)getDayCounts(state.curYear,state.curMonth)
}//判断是否是当前日期const isCurrentDate=(date)=>{if(date> 0&& date<=state.dataCount.length){console.log("currentYEAR:",currentYEAR)if(date==state.curDate && currentYEAR==state.curYear && currentMONTH==state.curMonth){return true}}else{return false}
}const filteredDate=(date)=>{return date>0?date:""
}//签到处理
const isShowDot=(date)=>{let {curYear,curMonth,curDate}=toRefs(state)let itemDate=`${curYear.value}-${curMonth.value+1}-${date}`console.log("itemDate:",itemDate)let res=state.signInList.some(j=>j.date==itemDate)?true:falseconsole.log("res:",res)return  res
}

这里有几个比较重要的函数：

1 getDayCounts--（获取总天数）

我们想得到当前月份的总天数，需要考虑到平年闰年等一些场景，所以我们通过设置下个月的最后日期为0，下个月的第0天实际上就是上个月的最后一天。而得到上个月的最后一天我们就能正确的得到当前这个月的最后一天。也就是做 let counts=new Date(state.curYear,state.curMonth+1,0).getDate() 这个设定。

2 我们要给当前日期做active样式。如何判断当前日期呢？当前日期是指当前年-月-日的日期。而每次我们切换年或者月的时候都是更改的全局下的state.curYear和state.curMonth,那它一定会改变。如何做一个固定值不是响应式的呢。这里我们对currentYEAR=toRaw( state.curYear)

currentMONTH=toRaw( state.curMonth)做了toRaw处理。

vue3 实现一个简易版日历相关推荐

DFiddler:A HTTP Packets Listener一个简易版的手机端的Fiddler。
Diddler A HTTP Packets Listener一个简易版的手机端的Fiddler. Android系统需要Root权限. PIC_20140121_220503_617.jpeg PI ...
肝一波 ~ 手写一个简易版的Mybatis，带你深入领略它的魅力！
零.准备工作 <dependencies><dependency><groupId>mysql</groupId><artifactId>m ...
实现一个简易版的微博，包含 client 和 server 两部分，并实现四个基础功能：关注、取关、发微博、获取用户微博列表
const assert = require('assert'); const question = '实现一个简易版的微博,包含 client 和 server 两部分,并实现四个基础功能:关注.取 ...
依赖注入[5]: 创建一个简易版的DI框架[下篇]
为了让读者朋友们能够对.NET Core DI框架的实现原理具有一个深刻而认识,我们采用与之类似的设计构架了一个名为Cat的DI框架.在<依赖注入[4]: 创建一个简易版的DI框架[上篇]> ...
javascript实现图片轮播_手撸一个简易版轮播图(上)
手撸一个简易版轮播图实现原理,通过控制 swiper-warpper 容器的定位来达到切换图片的效果. 页面布局简易版轮播图 < > 页面样式 .container{width: 60 ...
稳扎稳打Silverlight(18) - 2.0视频之详解MediaElement, 开发一个简易版的全功能播放器...
[索引页] [×××] 稳扎稳打Silverlight(18) - 2.0视频之详解MediaElement, 开发一个简易版的全功能播放器作者:webabcd 介绍 Silverlight 2.0 ...
【Linux】用进程控制知识做一个简易版shell
文章目录什么是shell 图示分析代码什么是shell shell是命令行解释器的统称当前使用的shell的名字是bash,bash其实也是一个程序当前我使用的是centos7下实现一个简 ...
一个简易版的新闻应用（同时兼容手机和平板）
代码可能有点长,需要耐心看几遍.前前后后我看了5遍才把整个流程吃透,相信你一定比我聪明!!! 新建一个FragmentBestPractice项目 (让ADT帮我们自动创建活动--活动名:MainAc ...
碎片的最佳实践——一个简易版的新闻应用
现在你已经将关于碎片的重要知识点都掌握得差不多了,不过在灵活运用方面可能还有些欠缺,因此又该进入最佳实践环节了. 前面有提到过,碎片很多时候都是在平板开发当中使用的,主要是为了解决屏幕空间不能充分利用 ...

vue3 实现一个简易版日历

vue3 实现一个简易版日历相关推荐

最新文章

热门文章