Controlled DateRangePicker

By default, the DateRangePicker is in an uncontrolled state.

The DateRangePicker provides options for:

Controlling the Value

To manage the date value of the DateRangePicker:
1. Use its value property.
1. Handle the onChange event.
1. Pass the new value through the props.

class App extends React.Component {
    constructor(props){
        super(props)

        this.state = {
            value: { start: new Date(2018, 8, 5), end: new Date(2018, 8, 12) }
        }
    }
    handleChange = (event) => {
        this.setState({ value: event.target.value })
    }
    render() {
        return(
            <div className="row">
                <div className="example-config col-xs-12 col-md-12 example-col">
                    <p>The range is: <br/>
                       start: {`${this.state.value.start}`}<br/>
                       end: {`${this.state.value.end}`}
                    </p>
                </div>
                <div className="col-xs-12 col-md-12 example-col">
                    <p>Controlled DateRangePicker</p>
                    <DateRangePicker
                        value={this.state.value}
                        onChange={this.handleChange}
                    />
                </div>
            </div>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Controlling the Popup State

To manage the popup state of the DateRangePicker and define whether the calendar will be displayed, use its show property.

class App extends React.Component {
    constructor(props){
        super(props)

        this.state = {
            show: false
        }
    }
    handleClick = (event) => {
        this.setState({ show: !this.state.show })
    }
    render() {
        return(
            <div className="row">
                <div className="col-xs-12 col-md-12 example-col">
                    <p>Controlled DateRangePicker</p>
                    <DateRangePicker
                        show={this.state.show}
                    />&nbsp;
                    <button className="k-button k-primary" onClick={this.handleClick}>Toggle</button>
                </div>
                <div className="col-xs-12 col-md-12 example-col">
                    <p>Always shown</p>
                    <DateRangePicker
                        show={true}
                    />
                </div>
            </div>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

In this article