当前位置：首页 > news >正文

Vue3.x 封装一个简单的日历

news 来源：原创 2025/6/20 21:17:24

Vue3.x 封装一个简单的日历

技术栈

Vue3.x + Vite

效果

在这里插入图片描述

初始化一个基于 Vue.3x 的 demo

npm create vite@latest

npm i less -D

开发组件

展示为 6*7 的布局
6 行 7 列

获取指定时间或者当前时间的年，月，日

const date = modelValue.value ? new Date(modelValue.value) : new Date()
const [y, m, d] = [date.getFullYear(), date.getMonth() + 1, date.getDate()]

获取当月开始星期用于计算前面填充时间

const curDays = []
/**
 * 当月开始星期
 */
const startW = new Date(y, m, 1).getDay()
let nm = m - 1
let ny = y
if (nm === 0) {
  nm = 12
  ny--
}
/**
 * 上月总天数
 */
const prevTotalDay = getMonthDay(ny, nm)
Array.from({ length: startW }, (_, i) => {
  const newDay = prevTotalDay - i
  const tempDate = `${ny}-${nm}-${newDay}`
  curDays.push({ y: ny, m: nm, d: newDay, value: addZero(newDay), disabled: true, today: tempDate === nowDate })
})

填充当月总天数

/**
 * 当月总天数
 */
const totalDay = getMonthDay(y, m)
Array.from({ length: totalDay }, (_, i) => {
  const nd = i + 1
  const tempDate = `${y}-${addZero(m)}-${addZero(nd)}`
  const today = tempDate === nowDate
  const selected = modelValue.value ? tempDate === modelValue.value : false
  curDays.push({ y, m, d: nd, value: addZero(nd), today, selected })
})

计算后面的填充时间

/**
 * 下月
 */
let nextM = m + 1
let nextY = y
if (nextM > 12) {
  nextM = 1
  nextY++
}
Array.from({ length: total - curDays.length }, (_, i) => {
  const nd = i + 1
  const tempDate = `${nextY}-${nextM}-${nd}`
  curDays.push({ y: nextY, m: nextM, d: nd, value: addZero(nd), disabled: true, today: tempDate === nowDate })
})