TimePicker Overview
The TimePicker represents a time-list where the user can enter or pick time values.
Basic Usage
The following example demonstrates the TimePicker in action.
class App extends React.Component {
render() {
return (
<div className="example-wrapper">
<TimePicker />
<p>(use Alt+<code>↓</code> to open the time list, Tab to move to the next time section in the popup, <code>↑</code> to increment and <code>↓</code> to decrement the value)</p>
</div>
)
}
}
ReactDOM.render(
<App/>,
document.querySelector('my-app')
)Functionality and Features
- Disabled TimePicker
- Controlled TimePicker
- Default value
- Time ranges
- Incremental steps
- Formats
- Placeholders
- Integration with JSON
- Globalization
- Keyboard navigation
- Accessibility
Events
The following example demonstrates basic TimePicker events.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { TimePicker } from '@progress/kendo-react-dateinputs';
class EventLog extends React.Component {
renderLogs = () => this.props.logs.map((log, index) =>
(<li key={index}>{log}</li>)
);
render() {
return (
<div className="example-config">
<h5>{this.props.title}</h5>
<ul className="event-log" style={{ maxHeight: '300px' }}>
{this.renderLogs()}
</ul>
</div>
);
}
}
class App extends React.Component {
logs = [];
constructor(props) {
super(props);
this.state = {
value: new Date(),
events: this.logs
};
}
handleChange = (event) => {
this.logs.unshift("change: " + event.target.value);
this.setState({
value: event.target.value,
events: this.logs.slice()
});
}
render() {
return (
<div className="row">
<div className="col-md-6">
<TimePicker
onChange={this.handleChange}
value={this.state.value}
/>
</div>
<div className="col-md-6">
<EventLog logs={this.state.events} title={"TimePicker Events"} />
</div>
</div>
);
}
}
ReactDOM.render(
<App />,
document.querySelector('my-app')
);