先看最终截至hongkongdoll 麻豆
图片
前置学问结束这个日期组件，只需要知说念以下几个问题：
现在的年份现在的月份今天是几号当月共有若干天这个月1号是星期几图片
图片
前三个问题很好领会，径直调api，就未几说了。
第四个问题有个小时间，当Date构造函数的第三个传0的时间，默示上个月的临了一天的日期，是以咱们要是念念知说念某个月共有若干天，即是要知说念临了一天是几号。第二个参数公共齐知说念，月份是从0运转的，现在是5月，念念知说念这个月共有若干天，即是要知说念6月的前一个月的临了一天的日期，是以第二个参数传5，new Date(2024， 5， 0)就默示5月31号，再调用getDate法子就获得了31。
图片
第五个问题更肤浅，先获得本月1号的Date实例，再调用getDay法子拿到星期几。
图片
运转编码和咱们手机上的日期不异，每周是把周日四肢第一天，界说一个数组用于遍历周几。上头咱们照旧知说念了一个月有若干天，也径直遍历数字。
图片
<template> <div class='calendar'> <div class='item' v-for='item in weeks' :key='item'>{{ '周' + item }}</div> <div class='item' v-for='item in days' :key='item' > {{ item }} </div> </div></template><script setup> import { computed } from 'vue' const weeks = ['日'， '一'， '二'， '三'， '四'， '五'， '六'] const now = new Date() // 本月的总天数 const days = computed(() => { return new Date(now.getFullYear()， now.getMonth() + 1， 0).getDate() })</script><style lang='scss'> .calendar { width: 500px; display: flex; flex-wrap: wrap; .item { width: calc(100% / 7); height: 80px; } }</style>图片
很昭着这个不合，因为本年的5月1号是周三。从前置学问咱们照旧知说念了每月1号是周几，而每周又是从周日运转的，径直在1号前边加上对应的几天占位的dom元素。
图片
<template> <div class='calendar'> <div class='item' v-for='item in weeks' :key='item'>{{ '周' + item }}</div> <div class='item' v-for='item in firstDateDay' :key='item' ></div> <div class='item' v-for='item in days' :key='item' > {{ item }} </div> </div></template><script setup> import { computed } from 'vue' const weeks = ['日'， '一'， '二'， '三'， '四'， '五'， '六'] const now = new Date() // 本月1号是周几 const firstDateDay = computed(() => { return new Date(now.getFullYear()， now.getMonth()， 1).getDay() }) // 本月的总天数 const days = computed(() => { return new Date(now.getFullYear()， now.getMonth() + 1， 0).getDate() })</script><style lang='scss'> .calendar { width: 500px; display: flex; flex-wrap: wrap; .item { width: calc(100% / 7); height: 80px; } }</style>图片
这么就对了。不外这还远远不够，还要在加个切换高下月、高亮线路今天的日期，这两个功能，这个日期组件才算是基本完善了。
图片
切换高下月头部线路的年月是跟着切换变化的，是以用computed来计较。
<div class='header'> <div class='title'>{{ nowYear }}年{{ nowMonth }}月</div> <div class='btns'> <button @click='toPrevMonth'> < </button> <button @click='toToday'> 今天 </button> <button @click='toNextMonth'> > </button> </div></div>// 及时计较现时页面线路的年份const nowYear = computed(() => { return now.getFullYear()})// 及时计较现时页面线路的月份const nowMonth = computed(() => { return now.getMonth() + 1})// 切换到上个月const toPrevMonth = () => {}// 切换到下个月const toNextMonth = () => {}// 回到今天const toToday = () => {}重心就在切换高下月，这里又有小时间。
const toPrevMonth = () => { now = new Date(now.getFullYear()， now.getMonth() - 1， 1)}const toNextMonth = () => { now = new Date(now.getFullYear()， now.getMonth() + 1， 1)}切换月份，只需要更正new Date()的第二个参数。
月份-1，即切换到上个月，要是现时是1月，month即是0，再减1，即是-1，此时年份也会自动减1，自动会酿成上一年的12月，month即是11了。
更正月份径直用setMonth法子会有问题，例如以下情况，4月莫得31号，就复返了5月1号的日期，这不是咱们念念要的。再例如1月和3月齐有30、31号，而2月最多只消29天，就不例如了。
图片
new Date()的第三个参数为什么传1，是因为每个月总天数不不异，就像以上情况，要是传径直传现时日期，咫尺天是某个月的31号时，切换到上个月或下个月，就不合了(七八月份之外，因为齐有31号)。
图片
而咱们这里只需要切换月份，拿到切换后的年和月，不热心几号，是以传1就好了，毕竟每个月齐有1号。
淫荡尼姑回到今天，径直赋值今天
const toToday = () => { now = new Date()}这时运行才发现，咱们上头的代码有问题，点击时页面并不会变化，是因为咱们界说的now，不是一个反映式变量，咱们点击修改的时间，computed不会感知到，也就不会从头计较，改一下代码用ref界说，now齐换成now.value。
到此期间码如下：
<template> <div class='container'> <div class='header'> <div class='title'>{{ nowYear }}年{{ nowMonth }}月</div> <div class='btns'> <button @click='toPrevMonth'> < </button> <button @click='toToday'> 今天 </button> <button @click='toNextMonth'> > </button> </div> </div> <div class='calendar'> <div class='item' v-for='item in weeks' :key='item'>{{ '周' + item }}</div> <div class='item' v-for='item in firstDateDay' :key='item' ></div> <div class='item' :class='{today: realDate.year === nowYear && realDate.month === nowMonth && realDate.date === item}' v-for='item in days' :key='item' > {{ item }} </div> </div> </div></template><script setup> import { ref， computed } from 'vue' const weeks = ['日'， '一'， '二'， '三'， '四'， '五'， '六'] const now = ref(new Date()) // 本月1号是周几 const firstDateDay = computed(() => { return new Date(now.value.getFullYear()， now.value.getMonth()， 1).getDay() }) // 本月的总天数 const days = computed(() => { return new Date(now.value.getFullYear()， now.value.getMonth() + 1， 0).getDate() }) // 今天的年月日 const realDate = { year: new Date().getFullYear()， month: new Date().getMonth() + 1， date: new Date().getDate() } // 及时计较现时页面线路的年份 const nowYear = computed(() => { return now.value.getFullYear() }) // 及时计较现时页面线路的月份 const nowMonth = computed(() => { return now.value.getMonth() + 1 }) const toPrevMonth = () => { now.value = new Date(now.value.getFullYear()， now.value.getMonth() - 1， 1) } const toNextMonth = () => { now.value = new Date(now.value.getFullYear()， now.value.getMonth() + 1， 1) } // 回到今天 const toToday = () => { now.value = new Date() }</script><style lang='scss'> .container { width: 500px; .header { height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 20px; .title { font-size: 26px; font-weight: 600; } .btns { button { height: 26px; border-radius: 0; margin: 0 2px; cursor: pointer; border-width: 1px; } } } .calendar { display: flex; flex-wrap: wrap; .item { width: calc(100% / 7); height: 80px; text-align: center; } .today { color: blue; font-weight: 600; } } }</style>高亮线路本日高亮线路今天的日期，这个是不会跟着用户的切换动作而更正的，是以径直界说写死，和及时切换后的年月日对比，要是是兼并天，就加上一个类式样。
<div class='item' :class='{today: realDate.year === nowYear && realDate.month === nowMonth && realDate.date === item}' v-for='item in days' :key='item'> {{ item }}</div>// 今天的年月日，这个是一天变一次的，不会跟着用户切换而变化const realDate = { year: new Date().getFullYear()， month: new Date().getMonth() + 1， date: new Date().getDate()}.today { color: blue; font-weight: 600;}此时截至如下
图片
到这里这个日期主要部分也算是基本结束了，还不错加上农历，再好意思化一下式样，给组件加一些props供外部修改
深宵了，写不动了。
公历和农历互转的jshongkongdoll 麻豆，网上开源的一大堆，感有趣的我方去搜。
本站仅提供存储就业，所有这个词本色均由用户发布，如发现存害或侵权本色，请点击举报。