DatePicker 动态设置 value

前言

应公司要求，最近要实现一个日期选择框，只选择年份。并且可以手动设置 上一年 和 下一年。我尝试了几种写法，最后成功了。期间遇到了清空日期后再打开选择日期，值为 NAN ,好在问题都解决了，大概的思路分享给他大家

1. 引入 DatePicker 组件

2. 在 state 中保存日期状态

  state = {
    dateString:  new Date().getFullYear(),
    date: moment(new Date().getFullYear(), 'YYYY')
  }

3. 选择年份和修改年份的时候更新状态

// 选择年份
  handleGetYear = (date, dateString) => {
    if (dateString !=='') {
      this.setState({dateString,date: moment(date, dateString)})
    }else {
      this.setState({dateString: '',date: ''})
    }
  }
  // 上一年
  handleGetLastYearClick = () => {
    const last = parseInt(this.state.dateString) - 1
    this.setState({date: moment(last, 'YYYY'),dateString: last})
  }
  // 下一年
  handleGetNextYearClick = () => {
    const next = parseInt(this.state.dateString) + 1
    this.setState({date: moment(next, 'YYYY'),dateString: next})
  }

这里注意： if (dateString !=='') {} 就是为了避免清空日期出现 NAN