官网: https://fusion.design/component/date-picker?themeid=2
import React from 'react';
import ReactDOM from 'react-dom';
import moment from 'moment';
import { DatePicker } from '@alifd/next';
import '@alifd/next/dist/next.css';
const { RangePicker, MonthPicker, YearPicker } = DatePicker;
const onChange = val => console.log(val)
/**
* <YearPicker onChange={onchange}></YearPicker>
* ERROR Uncaught TypeError: _this2.props.onChange is not a function
<YearPicker onChange={onChange} /> 正确
*
*/
/**
*
* disabledDate={this.disabledEndDate} 禁用日期函数
placeholder="Return Date" 输入提示
onChange={this.onEndChange} 日期值改变时的回调
visible={endOpen} 弹层显示状态
onVisibleChange={this.handleEndOpenChange} 弹层展示状态变化时的回调
*/
class CustomRangePicker extends React.Component{
constructor(props, content){
super(props, content)
this.state = {
startValue: null,
endValue: null,
endOpen: false
}
}
//对于一个日期控件 , 这里会调用42次, 6*7
disabledStartDate = (startValue) =>{
const { endValue } = this.state;
if(!startValue || !endValue){ // 两个控件 有一个没有选择, 所以的日期都可以点击
return false ;// false代表一个日期点, 可以选择, true 代表不可以选择
}
return startValue.valueOf() > endValue.valueOf() // 当两个日期控件都选择的时候, 需要把比结束时间大的日期给disable
}
disabledEndDate = (endValue) =>{
const { startValue } = this.state;
if(!startValue || !endValue){ // 两个控件 有一个没有选择, 所以的日期都可以点击
return false ;// false代表一个日期点, 可以选择, true 代表不可以选择
}
return startValue.valueOf() >= endValue.valueOf() // 选择结束日期 需要把比开始日期小的值给disable
}
onChange = (startName, value) =>{
this.setState({
[startName]:value
});
}
//点击 对开始日期state数据修改
onStartChange = (value) =>{
this.onChange('startValue', value)
}
//点击 对结束日期state数据修改
onEndChange = (value) =>{
this.onChange('endValue', value)
}
//弹层展示状态变化时的回调 控制日期控件是打开还是关闭 true打开 false关闭
handleStartOpen = (open) =>{
if(!open){
this.setState({endOpen:true})
}
}
//弹层展示状态变化时的回调 控制日期控件是打开还是关闭 true打开 false关闭
handleEndOpenChange = (open) =>{
this.setState( { endOpen: open } )
}
render(){
const { endOpen} = this.state;
return(
<div>
<DatePicker
disabledDate = { this.disabledStartDate }
placeholder = '开始日期'
onChange = { this.onStartChange }
onVisibleChange = { this.handleStartOpen }
/>
<span className="custom-sep">-</span>
<DatePicker
disabledDate={this.disabledEndDate}
placeholder="结束日期"
onChange={this.onEndChange}
visible={endOpen}
onVisibleChange={this.handleEndOpenChange}
/>
</div>
);
}
}
ReactDOM.render(<div>
<CustomRangePicker />
</div>, document.getElementById('root'));