vue实现日历效果

tech2025-07-08  1

Vue+moment.js+ant-design-vue实现日历效果

实现原理

日常的日历实现均为7*6=42格,42格中会加载当月时间和上月下月的部分信息。如果我们知道当前时间的第一天为星期几,那么我们就能推断出42个格子中第一个格子的具体时间。既然能够推算出42个格子的第一个格子的具体时间,那么通过for循环去遍历42并且每遍历一次在第一个格子上加上i就可以获取到每个格子的具体时间。如此日历效果实现。

代码逻辑 vue(基本框架)+moment(提供时间换算)+ant-design-vue(提供时间输入框)

<!-- --> <template>
最新回复(0)