All Components

You are on the site of the Kendo UI Wrappers for React suite which contains wrappers for the Kendo UI for jQuery widgets. To explore the brand-new set of Kendo UI for React components which are built from the ground up, go to the Kendo UI for React suite.

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 widget.

Basic Usage

The following example demonstrates the TimePicker in action.

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

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

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.

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'.

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 by the handler name.

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