Date Inputs / DateRangePicker / Getting Started
material theme

Getting Started with KendoReact DateRangePicker

The KendoReact DateRangePicker combines the KendoReact DateInput and MultiViewCalendar components and enables the user to enter or pick a date-range value.

The KendoReact DatePicker is distributed through NPM under the kendo-react-dateinputs package.

The DateRangePicker component is part of KendoReact, a professionally built commercial UI library. To try out this component you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.

Start Free Trial

Basic Usage

The following example demonstrates the DateRangePicker in action.

class App extends React.Component {
    render() {
        return(
            <div className="example-wrapper" >
                <DateRangePicker />
                <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

Is this article helpful?

Not finding the help you need?

Contact Support