fusion Design日期控件

官网： 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'));