EasyUI Forum

import React from 'react';
import { DateBox } from 'rc-easyui';
 
class App extends React.Component {
    constructor() {
        super();
        this.state = {
            value: new Date(),
        }
        this.times = React.createRef();
        this.times.current = 0;
    }
    formatDate(date) {
        let y = date.getFullYear();
        let m = date.getMonth() + 1;
        let d = date.getDate();
        return [m, d, y].join('/')
    }
    handleChange(value) {
        this.setState({ value: value })
    }
    handleFocus(){
      console.log("focus",this.times.current)
      this.times.current++;
    }
    render() {
        return (
            <div>
                <h2>Restrict Date Range in DateBox</h2>
                <p>This example shows how to restrict the user to select only ten days from now.</p>
                <DateBox
                    panelStyle={{ width: 250, height: 300 }}
                    editable={false}
                    value={this.state.value}
                    onChange={this.handleChange.bind(this)}
                    onFocus={this.handleFocus.bind(this)}
                />
                <p>{this.formatDate(this.state.value)}</p>
            </div>
        );
    }
}
 
export default App;