@progress/kendo-dateinputs-react-wrapper/docs/timepicker/index.md

Kendo UI DateInputs wrapper for React

---
title: Overview
page_title: Overview - TimePicker - Kendo UI Wrappers for React
description: "Get an overview of the features the Kendo UI TimePicker delivers and use the wrapper in React projects."
slug: overview_timepicker
position: 1
---

# TimePicker Overview

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

The TimePicker wrapper for React is a client-side wrapper for the [Kendo UI TimePicker](http://docs.telerik.com/kendo-ui/api/javascript/ui/timepicker) widget.

## Basic Usage

The following example demonstrates the TimePicker in action.

```jsx-preview

    class LayoutsContainer extends React.Component {
      constructor(props) {
        super(props);
        this.date = props.date
      }

      render() {
        return (
        <div className={"example-wrapper"} >
            <p>Select a time value:</p>
            <TimePicker
                value={this.date}
                dateInput={true}
            />
            <p>(↑ to increment and ↓ to decrement the value)</p>
        </div>
        );
      }
    }

    ReactDOM.render(
      <LayoutsContainer date = {new Date()} />,
      document.querySelector('my-app')
    );
```

## Features and Functionalities

* [Incremental steps](#toc-incremental-steps)
* [Time ranges](#toc-time-ranges)
* [Formats](#toc-formats)
* [Keyboard navigation]({% slug keyboard_navigation_timepicker %})

### Incremental Steps

By default, the TimePicker increments or decrements each part of its time values by one step.

```jsx

    class LayoutsContainer extends React.Component {
      constructor(props) {
        super(props);
        this.date = props.date
      }

      render() {
        return (
        <div className={"example-wrapper"} >
            <p>Select a time value:</p>
            <TimePicker
                value={this.date}
                dateInput={true}
            />
            <p>(use ↑ to increment and ↓ to decrement the value)</p>
        </div>
        );
      }
    }

    ReactDOM.render(
      <LayoutsContainer date = {new Date()} />,
      document.querySelector('my-app')
    );
```

### Time Ranges

You can control the range of time values in the TimePicker by setting the `min` and `max` properties. When the `min` and `max` properties are configured and the selected time value is out of this range, the component triggers a validation error.

```jsx

    class LayoutsContainer extends React.Component {

      render() {
        return (
        <div className={"example-wrapper"} >
            <p>Select a date:</p>
            <TimePicker
               min={new Date(2017,11,11,10,10)}
               max={new Date(2017,12,11,15,10)}
               dateInput={true}
            />
            <p>(use ↑ to increment and ↓ to decrement the value)</p>
        </div>
        );
      }
    }

    ReactDOM.render(
      <LayoutsContainer />,
      document.querySelector('my-app')
    );
```

### Formats

You can control the format of the TimePicker by using the `format` property, which accepts string parameters. When `format` is set and the input element is not focused, the value is formatted accordingly. By default, the `format` property is set to `'d'`.

```jsx

    class LayoutsContainer extends React.Component {

      render() {
        return (
            <div className={"example-wrapper"} >
                <div className={"col-xs-12 col-sm-6 example-col"}>
                    <p>Select a long time:</p>
                    <TimePicker
                        value={new Date()}
                        format={"HH:mm:ss"}
                    />
                </div>

                <div className={"col-xs-12 col-sm-6 example-col"}>
                    <p>Select a short time:</p>
                    <TimePicker
                        value={new Date()}
                        format={"hh:mm tt"}
                    />
                </div>
            </div>
        );
      }
    }

    ReactDOM.render(
      <LayoutsContainer />,
      document.querySelector('my-app')
    );
```

## Events

The following example demonstrates basic TimePicker events. You can subscribe to [all TimePicker events](https://docs.telerik.com/kendo-ui/api/javascript/ui/timepicker#events) by the handler name.

```jsx

    class LayoutsContainer extends React.Component {

        change(){
            console.log('Change was triggered!');
        }

        open(){
            console.log('Open was triggered!');
        }

        close(){
            console.log('Close was triggered!');
        }


      render() {
        return (
            <div className={"row example-wrapper"}>
                <div className={"col-xs-12 col-md-6 example-col"}>
                    <TimePicker change={this.change} open={this.open}  close={this.close}/>
                </div>
            </div>
        );
      }
    }

    ReactDOM.render(
      <LayoutsContainer />,
      document.querySelector('my-app')
    );
```

## Suggested Links

* [Kendo UI TimePicker for jQuery](https://docs.telerik.com/kendo-ui/api/javascript/ui/timepicker)
* [API Reference of the TimePicker Widget](http://docs.telerik.com/kendo-ui/api/javascript/ui/timepicker)