All Components

This website hosts native Kendo UI components, built from the ground up with the ultimate performance in mind, intended to be used in the React ecosystem.

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

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')
);
In this article