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

DateInput Overview

The DateInput represents an input field that recognizes and formats scheduling values such as dates.

The DateInput wrapper for React is a client-side wrapper for the Kendo UI DateInput widget.

Basic Usage

The following example demonstrates the DateInput in action.

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

     render() {
       return (
       <div class="example-wrapper">
           <p>Enter a date:</p>
           <DateInput
              value = {this.date}
           />
           <p>(use ← and →  to navigate, ↑ to increment and ↓ to decrement the value)</p>
       </div>
       );
     }
   }

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

Features and Functionalities

Date Ranges

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

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

     render() {
       return (
       <div class="example-wrapper">
           <p>Enter a date:</p>
           <DateInput value={this.date}
              min={new Date(2017, 9, 1)}
              max={new Date(2027, 10, 1)}
              format={'yyyy/MM/dd'} />
           <p>(use ← and →  to navigate, ↑ to increment and ↓ to decrement the value)</p>
       </div>
       );
     }
   }

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

Formats

You can control the format of the DateInput 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'.

For more information on the date and number formats the Kendo UI wrappers for React support, refer to the Globalization article.

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

     render() {
       return (
       <div className={"example-wrapper"} >
         <div className={"col-xs-12 col-sm-6 example-col"}>
             <p>Select a long date:</p>
             <DateInput
                 format={"dd-MMM-yyyy HH:mm:ss"}
                 value={this.date}
             />
         </div>

         <div className={"col-xs-12 col-sm-6 example-col"}>
             <p>Select a short date:</p>
             <DateInput
                 format={"MMMM yyyy"}
                 value={this.date}
             />
         </div>
     </div>
       );
     }
   }

   ReactDOM.render(
     <LayoutsContainer date = { new Date(2000, 2, 10, 13, 30, 0)} />,
     document.querySelector('my-app')
   );

Events

The following example demonstrates basic DateInput events. You can subscribe to all DateInput events by the handler name.

class LayoutsContainer extends React.Component {

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

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

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