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.
Example
View Source
Change Theme:
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.
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')
);