react使用laydate

最近项目中使用的是react+antd，因为设置秒杀活动需要用到时间场次，需要控制最大时间和最小时间，个人觉得antd的时间控件不太好用，所以就使用了layui里面的laydate控件

首先下载依赖

npm install 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