项目里的要求是前面有个年份的选择, 选中后 后面的日期选择器不能跨年选择
前面选择了年 后面日期选择器 设置自动只能选这一年当中的日期!
上代码!
结合antDesign ui库日期选择器
//年份选择
<FormItem
label="年份"
labelCol={{ span: 6 }}
wrapperCol={{ span: 15 }}
>
<Select
width="20%"
showSearch
value={this.state.selectYear}
onChange={this.changeSelect.bind(this)}
>
{this.state.yearList.map((item) => (
<Option value={item}>{item}</Option>
))}
</Select>
</FormItem>
//日期选择器
<RangePicker
value={[this.state.dateStart, this.state.dateEnd]}
disabledDate={this.disabledDate.bind(this)}
onChange={this.onChangeTime.bind(this)}
/>
js代码部分
获取一个年份选择的列表 ,从当前年往前推
getYearList() {
// 获取当前年
let date = new Date() //获取当前时间
let nowYears = date.getFullYear() //获取当前年
let section = nowYears - 2018 //步差
this.state.yearList = [] //存放年列表的数组
for (var i = 0; i < section; i++) {
this.state.yearList.push(nowYears--)
}
this.setState({
selectYear: this.state.yearList[0],
})
let year = this.state.yearList[0]
let dateStart = year + '-01-01' //选中那年的第一天
let dateEnd = year + '-12-31' //选中那年的最后一天
this.setState({
dateStart: dateStart,
dateEnd: dateEnd,
start1:dateStart,
end1:dateEnd
})
}
componentWillMount(){
this.getYearList()
}
日期选择禁止的范围
//其中current.getTime()就是你想要禁止选择的时间
disabledDate(current) {
return (
current.getTime() > Date.now() ||
current.getTime() < moment(this.state.start1) ||
current.getTime() > moment(this.state.end1)
)
}
/**
* 时间选择
*/
onChangeTime(val, dateString) {
this.setState({
start: dateString[0],
end: dateString[1],
dateStart:dateString[0],
dateEnd:dateString[1]
})
}
```
这样就完成了 前面年份改变 后面日期选择器里默认的时间随之禁止了