vue日历插件设计思路

本文介绍了基于Vue2.5.6设计日历插件的思路,包括规划、问题分析和数据结构构建。讨论了如何获取月份、日期,并构建适应不同星期起点的日期矩阵。还探讨了扩展功能,如切换月份的实现细节。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

规划

  • 显示title 为选择的具体年月日
  • 渲染每个月的天数
  • 一个月的天数显示星期几
    在这里插入图片描述

问题分析

  • 一个时间对象的 get[name]方法可以获取年月日:getDate, getDay, getMonth…
  • 获取月份的时候,月份为 index 索引,从 0 开始,所以真实月份为 getMonth+1
  • 借助 new Date ,这个对象可以作为参数,传入组件,从而渲染不同月份的日期。但是 new Date 传入字符串参数的时候,存在兼容性问题。所以采用 new Date(year, month, day)的构造事件对象的方式
  • 基于 vue2.5.6版本构建的组件,传参的时候,如果传递的参数的默认值是一个对象类型,这个默认值必须从一个函数中返回

构建数据结构

  • 这个月份总共多少天?
    通过获取传入的 Date 对象的当前月的最后一天是几号,那么这个月就有多少天,假设得到了 N 天。
new Date(2005, 10, 0).toLocaleDateString()
// output "2005/10/31"  第三个参数传 
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值