壹 · 多选日期组件之[日期多选]
首先我们先要确定自己的展示效果
- 点击日历icon日历组件弹出
- 操作日历组件,数据同步综合展示区
- 日历支持月份年份切换操作
- 支持和antd3.X的表单一起使用
选中及展示操作展示
思考逻辑
-
年份展示:获取当前年的数字,在此基础上左减右加
-
月份展示:月份在左右切换时需注意1月和12月的临界值
-
日期展示:虽然每个月份的日期不同,但是我们固定展示的是7*6个日期格子,只要我们计算出这个42个长度的数组就可以展示出日期
操字母挥组件
外层展示组件
首先确定以下两个参数,选中啥?是否展示出来日历组件?
区分组件区域,确定组件功能
日历组件
使用moment.js获取当前年月,并设置给相应的变量
区分日历区间区域
其中的daysList的值
const daysList = getMonth(yearNumber, monthNumber)
先写个函数把42个日期计算出来
此时我们就可以完整的展示出日历组件了
添加相应操作,月份切换
年月切换展示
添加日期选中操作
选中效果展示
如果你的上级是antd的Form则需要在展示中添加
添加Form展示
-
点击非日历组件区域关闭日历组件
-
为必填项时,清空数据有错误提示