laydateを使用して反応させます

最近のプロジェクトで使用される必要がスパイク活動セッションを設定するための時間を使用しているため、+ antdを反応させることである最大時間と最小時間を制御する必要性、個人的に私たちはlaydateコントロール内layuiを使用するので、時間のコントロールは、使用することは容易ではないantdことを感じます

まず、依存関係をダウンロード

NPM layui-laydateをインストール

使用laydate

import React,{Component} from 'react';

class LaydateComponent extends Component {

  constructor(props) {
    super(props);
    this.startInputRef = React.createRef();
    this.endInputRef = React.createRef();
  }
  
	state={
		range:{
	        startDate:'2019-12-27 18:04:00', // 定义开始时间
	        endDate:'2019-12-30 18:04:00' //定义结束时间
	    }
	}
  
  componentDidMount() {
    const {range:{startDate,endDate}} = this.state;
    const dom1 =  laydate.render({
        elem: this.startInputRef.current, // 指定开始时间元素
        type:'datetime',
        min:startDate,
        max:endDate,
        done: (value, date)=>{
            console.log(value); // 得到日期生成的值，如：2017-08-18
           
            dom2.config.min={...date,month:date.month-1} // 选择完开始时间之后重新渲染laydate,这里需注意月份是从0开始的,所以需要减1
            console.log(dom2)
        }
    });

    const dom2 =laydate.render({
        elem: this.endInputRef.current, // 指定结束时间元素
        type:'datetime',
        min:startDate,
        max:endDate,
        done: (value, date)=>{
            console.log(value); // 得到日期生成的值，如：2017-08-18
        }
    });
  }
	


  render(){
    return (
      <div>
		<input readOnly className='ant-calendar-picker-input ant-input' type="text" placeholder='请选择开始时间' ref={this.startInputRef} />
		<input readOnly className='ant-calendar-picker-input ant-input' type="text" placeholder='请选择结束时间' ref={this.endInputRef} />
	  </div>
    )
  }
}
export default LaydateComponent