antd 时间控件

 

 

 

 

 

 

 

 

 

01

 

import { DatePicker } from 'antd';

class DateRange extends React.Component {
  state = {  //状态
    startValue: null,
    endValue: null,
    endOpen: false,
  };

  disabledStartDate = startValue => {  //开始时间
    const { endValue } = this.state;
    if (!startValue || !endValue) {
      return false;
    }
    return startValue.valueOf() > endValue.valueOf();
  };

  disabledEndDate = endValue => {   //结束时间
    const { startValue } = this.state;
    if (!endValue || !startValue) {
      return false;
    }
    return endValue.valueOf() <= startValue.valueOf();
  };
  
  onChange = (field, value) => {   //时间发生变化的回调
    this.setState({
      [field]: value,
    });
  };

  onStartChange = value => {  //开始时间
    this.onChange('startValue', value);
  };

  onEndChange = value => {
    this.onChange('endValue', value);
  };

  handleStartOpenChange = open => {
    if (!open) {
      this.setState({ endOpen: true });
    }
  };

  handleEndOpenChange = open => {
    this.setState({ endOpen: open });
  };

  render() {
    const { startValue, endValue, endOpen } = this.state;
    return (
      <div>
        <DatePicker
          disabledDate={this.disabledStartDate}     //	不可选择的日期
          showTime                           //增加时间选择功能
          format="YYYY-MM-DD HH:mm:ss"     //设置日期格式
          value={startValue}      //日期
          placeholder="Start"       //输入框提示文字
          onChange={this.onStartChange}     //时间发生变化的回调
          onOpenChange={this.handleStartOpenChange}   //弹出日历和关闭日历的回调
        />


        <DatePicker
          disabledDate={this.disabledEndDate}
          showTime
          format="YYYY-MM-DD HH:mm:ss"
          value={endValue}
          placeholder="End"
          onChange={this.onEndChange}
          open={endOpen}     //控制弹层是否展开
          onOpenChange={this.handleEndOpenChange}
        />
      </div>


    );
  }
}

ReactDOM.render(<DateRange />, mountNode);