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

Kendo UI DateInputs wrapper for React

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

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

## Basic Usage

The following example demonstrates the DateInput in action.

```jsx-preview

    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](#toc-date-ranges)
* [Formats](#toc-formats)
* [Keyboard navigation]({% slug keyboard_navigation_dateinput %})

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

```jsx

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

```jsx

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

## Suggested Links

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