@progress/kendo-dateinputs-react-wrapper/docs/datetimepicker.md

Kendo UI DateInputs wrapper for React

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

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

## Basic Usage

The following example demonstrates the DateTimePicker in action.

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

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

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

```jsx

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

```jsx

    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.

```jsx

    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.

```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"}>
                    <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](https://docs.telerik.com/kendo-ui/api/javascript/ui/datetimepicker#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"}>
                    <DateTimePicker change={this.change} open={this.open}  close={this.close}/>
                </div>
            </div>
        );
      }
    }

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

## Suggested Links

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