New to KendoReact? Start a free 30-day trial
Controlled Mode
By default, the DatePicker is in an uncontrolled state.
The DatePicker provides options for:
Controlling the Date Value
To manage the date value of the DatePicker:
The following example demonstrates how to control the DatePicker value.
Change Theme
Theme
Loading ...
Controlling the Popup State
To manage the popup state of the DatePicker, use its show
property, to set the shown state of the component.
The following example demonstrates how to control the state of the DatePicker calendar upon display.
jsx
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-6 example-col">
<p>Controlled DatePicker</p>
<DatePicker show={this.state.show} />
<button className="k-button k-primary" onClick={this.handleClick}>
Toggle
</button>
</div>
<div className="col-xs-12 col-md-6 example-col">
<p>Always shown</p>
<DatePicker show={true} />
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.querySelector('my-app'));