「React系列」之手写多选日期组件

1,728 阅读1分钟

壹 · 多选日期组件之[日期多选]

首先我们先要确定自己的展示效果

  • 点击日历icon日历组件弹出
  • 操作日历组件,数据同步综合展示区
  • 日历支持月份年份切换操作
  • 支持和antd3.X的表单一起使用

选中及展示操作展示

思考逻辑

  • 年份展示:获取当前年的数字,在此基础上左减右加

  • 月份展示:月份在左右切换时需注意1月和12月的临界值

  • 日期展示:虽然每个月份的日期不同,但是我们固定展示的是7*6个日期格子,只要我们计算出这个42个长度的数组就可以展示出日期

操字母挥组件

外层展示组件

首先确定以下两个参数,选中啥?是否展示出来日历组件?

区分组件区域,确定组件功能

日历组件

使用moment.js获取当前年月,并设置给相应的变量

区分日历区间区域

其中的daysList的值

const daysList = getMonth(yearNumber, monthNumber)

先写个函数把42个日期计算出来

此时我们就可以完整的展示出日历组件了

添加相应操作,月份切换

年月切换展示

添加日期选中操作

选中效果展示

如果你的上级是antd的Form则需要在展示中添加

添加Form展示

  • 点击非日历组件区域关闭日历组件

  • 为必填项时,清空数据有错误提示

需要完整代码的@我