All Components

This website hosts Kendo UI wrappers of Kendo UI for jQuery widgets intended to be used in the React ecosystem.

Go to the native Kendo UI implementations for React

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