DatePicker|DatePicker 动态设置 value DatePicker动态设置value

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

引入 DatePicker 组件

在 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}) }

【DatePicker|DatePicker 动态设置 value】这里注意： if (dateString !=='') {} 就是为了避免清空日期出现 NAN