antd Calendar 只显示当前月份怎么做

经过尝试, 貌似官网提供的api无法做到只显示当前月份的日期

以上红圈选中的都是我们不想显示的,但是博主没有发现(改源码之外)的方法去除,没关系,我们也可以在渲染数据的时候,过滤掉下一个月份的数据:

getListData = value => {
    const { dayList } = this.props.boardForm
    let t = moment(value._d)
      .format('YY-MM-DD')
      .substring(0, 5)
    let curr_t = new Date()
    let listData

    curr_t = moment(curr_t)
      .format('YY-MM-DD')
      .substring(0, 5)
    // console.log('t, curr_t', t, curr_t)

    if (t === curr_t) {
      // 过滤掉非本月的数据
      dayList &&
        dayList.forEach(it => {
          if (value.date() === it.day - 0) {
            listData = [
              { type: 'warning', content: it.expend, key: it.id },
              { type: 'warning', content: it.income, key: it.id },
              { type: 'warning', content: it.signContractAmount, key: it.id },
              { type: 'warning', content: it.signContractCount, key: it.id },
            ]
          }
        })
    }

    return listData || []
  }
dateCellRender = value => {
    const listData = this.getListData(value)
    return (
      <ul className={styles.events}>
        {listData.map(item => (
          <li key={Math.random() * 1000}>
            <Badge status={item.type} text={item.content} />
          </li>
        ))}
      </ul>
    )
  }
render() {
    const { packageList, contractList } = this.props.boardForm
    const { timeLength } = this.state
    return (
        <div>
          <h4>日历看板</h4>
          <Calendar
            dateCellRender={this.dateCellRender}
            monthCellRender={this.monthCellRender} />
        </div>
    )
  }

猜你喜欢

转载自blog.csdn.net/hzxOnlineOk/article/details/89211262