@progress/kendo-dateinputs-react-wrapper/docs/datepicker/index.md

Kendo UI DateInputs wrapper for React

---
title: Overview
page_title: Overview - DatePicker - Kendo UI Wrappers for React
description: "Get an overview of the features the Kendo UI DatePicker delivers and use the wrapper in React projects."
slug: overview_datepicker
position: 1
---

# 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](http://docs.telerik.com/kendo-ui/api/javascript/ui/datepicker) widget.

## Basic Usage

The following example demonstrates the DatePicker in action.

{% meta height:380 %}
```jsx-preview

    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')
    );
```
{% endmeta %}

## Features and Functionalities

* [Date ranges](#toc-date-ranges)
* [Formats](#toc-formats)
* [Calendar week number column](#toc-calendar-week-number-column)
* [Calendar templates](#toc-calendar-templates)
* [Keyboard navigation]({% slug keyboard_navigation_datepicker %})

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

```jsx

    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](https://docs.telerik.com/kendo-ui/framework/globalization/overview) article.

```jsx

    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.

```jsx

    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.

```jsx
    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](https://docs.telerik.com/kendo-ui/api/javascript/ui/datepicker#events) by the handler name.

```jsx

    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')
    );
```

## Suggested Links

* [Kendo UI DatePicker for jQuery](https://docs.telerik.com/kendo-ui/controls/editors/datepicker/overview)
* [API Reference of the DatePicker Widget](http://docs.telerik.com/kendo-ui/api/javascript/ui/datepicker)