All Components

This website hosts native Kendo UI components, built from the ground up with the ultimate performance in mind, intended to be used in the React ecosystem.

DatePicker Overview

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

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')
);
In this article