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

DatePicker Overview

The DatePicker combines the Kendo UI DateInput and Calendar components.

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

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

Basic Usage

The following example demonstrates the DatePicker in action.

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

     render() {
       return (
       <div class="example-wrapper" >
           <p>Select a date:</p>
           <DatePicker
              value={this.date}
           />
           <p>(use Alt+↓ to open the calendar, ← 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 DatePicker 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 {

     render() {
       return (
       <div class="example-wrapper" >
           <p>Select a date:</p>
           <DatePicker
              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(
     <LayoutsContainer />,
     document.querySelector('my-app')
   );

Formats

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

   ReactDOM.render(
     <LayoutsContainer 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"}>
                   <DatePicker weekNumber={true}/>
               </div>
           </div>
       );
     }
   }

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

Calendar Templates

The Calendar of the DatePicker 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"}>
                   <DatePicker month = {this.month} />
               </div>
           </div>
       );
     }
   }

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

Events

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

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