Controlled Mode
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:
Example
View Source
Change Theme:
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}
/>
<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')
);