Date Inputs / TimePicker / Getting Started
material theme

Getting Started with KendoReact TimePicker

The KendoReact TimePicker represents a time-list where the user can enter or pick time values.

The KendoReact TimePicker component is part of the KendoReact library of React UI components. It is distributed through NPM under the kendo-react-dateinputs package.

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')
);
 /