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.

DateTimePicker Overview

The DateTimePicker combines the Kendo UI DateInput and Calendar components.

It enables the user to enter or pick a date and time value.

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

Basic Usage

The following example demonstrates the DateTimePicker in action.

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

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

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

Features and Functionalities

Date Ranges

You can control the range of dates in the DateTimePicker 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 Container extends React.Component {

     render() {
       return (
       <div class="example-wrapper" >
           <p>Select a date:</p>
           <DateTimePicker
              min={new Date(2017,11,11)}
              max={new Date(2017,12,11)}
           />
           <p>(use Alt+↓ to open the calendar, ← and →  to navigate, ↑ to increment and ↓ to decrement the value)</p>
       </div>
       );
     }
   }

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

Formats

You can control the format of the DateTimePicker 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 Container 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>
             <DateTimePicker
                 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>
             <DateTimePicker
                 format={"MMMM yyyy"}
                 value={this.date}
             />
         </div>
     </div>
       );
     }
   }

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

Calendar Week Number Column

You can render a column which displays the number of the weeks within the current month view of the Calendar. To show the Calendar week number column, set the weekNumber property.

class LayoutsContainer extends React.Component {

     render() {
       return (
           <div className={"row example-wrapper"}>
               <div className={"col-xs-12 col-md-6 example-col"}>
                   <DateTimePicker weekNumber={true}/>
               </div>
           </div>
       );
     }
   }

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

Calendar Templates

The Calendar of the DateTimePicker enables you to customize the content of each cell by using cell templates. To specify the template for rendering the cells between the min and max range within the month view, use the month.content property.

class LayoutsContainer extends React.Component {

        constructor(props) {
           super(props);
           this.month = {
             content: `# if (data.value>15) {#
                           <b>#=data.value#</b>
                      # }else{ #
                           <i>#=data.value#</i>#}#`
           }
       }

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

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

Events

The following example demonstrates basic DateTimePicker events. You can subscribe to all DateTimePicker 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"}>
                   <DateTimePicker change={this.change} open={this.open}  close={this.close}/>
               </div>
           </div>
       );
     }
   }

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