前言

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

引入 DatePicker 组件 <DatePicker onChange={this.handleGetYear} picker="year" className={'datePickerStyle'} value={date ? moment(date,dateString) : null}/>
在 state 中保存日期状态 state = { dateString: new Date().getFullYear(), date: moment(new Date().getFullYear(), 'YYYY') }
选择年份和修改年份的时候更新状态 // 选择年份 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

DatePicker 动态设置 value