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 is distributed through NPM under the kendo-react-dateinputs package.

The TimePicker component is part of KendoReact, a professionally built commercial UI library. To try out this component you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.

Start Free Trial

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

Is this article helpful?

Not finding the help you need?

Contact Support