Date Inputs / DatePicker / Getting Started
material theme

Getting Started with KendoReact DatePicker

The KendoReact DatePicker combines the KendoReact DateInput and Calendar components and enables the user to enter or pick a date value.

The KendoReact DatePicker component is part of the KendoReact library of React UI components. It is distributed through NPM under the kendo-react-dateinputs package.

Basic Usage

The following example demonstrates the DatePicker in action.

class App extends React.Component {
    render() {
        return(
            <div className="example-wrapper" >
                <DatePicker />
                <p>(use Alt+<code>↓</code> to open the calendar, <code>←</code> and <code>→</code> to navigate, <code>↑</code> to increment and <code>↓</code> to decrement the value)</p>
            </div>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Functionality and Features

Events

The following example demonstrates basic DatePicker events.

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { DatePicker } from '@progress/kendo-react-dateinputs';

class EventLog extends React.Component {
    renderLogs = () => this.props.logs.map((log, index) =>
        (<li key={index}>{log}</li>)
    );
    render() {
        return (
            <div className="example-config">
                <h5>{this.props.title}</h5>
                <ul className="event-log" style={{ maxHeight: '300px' }}>
                    {this.renderLogs()}
                </ul>
            </div>
        );
    }
}

class App extends React.Component {
    logs = [];
    constructor(props) {
        super(props);

        this.state = {
            value: new Date(),
            events: this.logs
        };
    }
    handleChange = (event) => {
        this.logs.unshift("change: " + event.target.value);

        this.setState({
            value: event.target.value,
            events: this.logs.slice()
        });
    }
    render() {
        return (
            <div className="row">
                <div className="col-md-6">
                    <DatePicker
                        onChange={this.handleChange}
                        value={this.state.value}
                    />
                </div>
                <div className="col-md-6">
                    <EventLog logs={this.state.events} title={"DatePicker Events"} />
                </div>
            </div>
        );
    }
}

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