Controlled Mode
By default, the TimePicker is in an uncontrolled state.
The TimePicker provides options for:
Controlling the Date Value
To manage the date value of the TimePicker:
The following example demonstrates how to control the TimePicker value.
class App extends React.Component {
constructor(props){
super(props)
this.state = {
value: new Date()
}
}
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 value is: {`${this.state.value}`}</p>
</div>
<div className="col-xs-12 col-md-12 example-col">
<p>Controlled TimePicker</p>
<TimePicker
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 and set the shown state of the TimePicker, use its show property.
The following example demonstrates how to control the state of the TimePicker time-selector 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 TimePicker</p>
<TimePicker
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>
<TimePicker
show={true}
/>
</div>
</div>
)
}
}
ReactDOM.render(
<App />,
document.querySelector('my-app')
);