react using laydate

Recently used in the project is to react + antd, because the need to use the time to set the spike activity sessions, the need to control the maximum time and minimum time, personally feel that the time controls antd not easy to use, so we use the layui inside laydate controls

First, download the dependencies

npm install layui-laydate

Use 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