Customization

The DateRangePicker enables the user to render custom components instead of the default ones and, in this way, to customize most of the child DateRangePicker components which are otherwise inaccessible.

While you can control the child components through the props of the DateRangePicker, the suggested approaches allow you to completely replace and have full control over them.

The user can replace the following DateRangePicker components with custom ones:

  • Start and end DateInputs—Render the inputs for the start and end range selection of the DateRangePicker.
  • Calendar—Renders the MultiViewCalendar inside the popup of the DateRangePicker.
  • Popup—Renders the popup which contains the MultiViewCalendar.

Customizing the DateInputs

The DateRangePicker accepts an object of type SelectionRange as a value. Each DateInput expects you to pass start and end values. To override the components that are responsible for the date input, provide either a startDateInput or an endDateInput property and pass a custom component.

The following example demonstrates how to use different DateInput components for the start and end values of the DateRangePicker.

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

import { DateRangePicker } from '@progress/kendo-react-dateinputs';
import { CustomStartDateInput } from './customStartDateInput.jsx';
import { CustomEndDateInput } from './customEndDateInput.jsx';

class App extends React.Component {
    render() {
        return (
            <DateRangePicker
                startDateInput={CustomStartDateInput}
                endDateInput={CustomEndDateInput}
            />
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
import * as React from 'react';

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

export class CustomStartDateInput extends React.Component {
    render() {
        const style = { color: this.props.value !== null ? 'green' : 'red' };

        return (
            <label style={{ textAlign: 'center' }}>
                <span style={style}>Start</span> <br />
                <DateInput {...this.props} label={undefined} />
            </label>
        );
    }
}
import * as React from 'react';

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

export class CustomEndDateInput extends React.Component {
    render() {
        const style = { color: this.props.value !== null ? 'green' : 'red' };

        return (
            <label style={{ textAlign: 'center' }}>
                <span style={style}>End</span> <br />
                <DateInput {...this.props} label={undefined} />
            </label>
        );
    }
}

Customizing the Calendar

By default, the DateRangePicker renders a MultiViewCalendar in a range-selection mode. To override the component that is responsible for the range selection, set the calendar property to a custom component.

The following example demonstrates how to use two different Calendars instead of a single MultiViewCalendar in a range mode.

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

import { DateRangePicker } from '@progress/kendo-react-dateinputs';
import { CustomCalendar } from './customCalendar.jsx';

class App extends React.Component {
    render() {
        return (
            <DateRangePicker
                calendar={CustomCalendar}
            />
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
import * as React from 'react';

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

export class CustomCalendar extends React.Component {
    handleStartChange = (syntheticEvent) => {
        const { onChange, value } = this.props;

        onChange({
            value: {
                start: event.target.value,
                end: value.end
            },
            syntheticEvent,
            target: this
        });
    }

    handleEndChange = (syntheticEvent) => {
        const { onChange, value } = this.props;

        onChange({
            value: {
                start: value.start,
                end: event.target.value
            },
            syntheticEvent,
            target: this
        });
    }

    render() {
        return (
            <div>
                <Calendar
                    value={this.props.value.start}
                    onChange={this.handleStartChange}

                    navigation={false}
                />
                <Calendar
                    value={this.props.value.end}
                    onChange={this.handleEndChange}

                    navigation={false}
                />
            </div>);
    }
}

Customizing the Popup

The Popup component inside the DateRangePicker acts as a container element with an absolute position. The Popup is displayed on focus and is hidden on blur. To override the component that is responsible for containing the Calendar, set the popup property to a custom component.

The following example demonstrates how to override some of the Popup properties.

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

import { DateRangePicker } from '@progress/kendo-react-dateinputs';
import { CustomPopup } from './customPopup.jsx';

class App extends React.Component {
    render() {
        return (
            <div style={{ textAlign: 'center' }}>
                <DateRangePicker
                    popup={CustomPopup}
                />
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
import * as React from 'react';

import { Popup } from '@progress/kendo-react-popup';

export class CustomPopup extends React.Component {
    render() {
        return (
            <Popup
                {...this.props}
                anchorAlign={{
                    horizontal: 'center',
                    vertical: 'bottom'
                }}
                popupAlign={{
                    horizontal: 'center',
                    vertical: 'top'
                }}
            />
        );
    }
}

In this article