Configuring Child Components

By default, the DateRangePicker sets only the value and show properties for its child components.

To implement additional settings, use the options which the DateRangePicker provides for the following child components:

Configuring DateInputs

To enable the passing of additional props to the start and end child DateInputs, configure the startDateInputSettings and endDateInputSettings.

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

import { DateRangePicker } from '@progress/kendo-react-dateinputs';
class App extends React.Component {
    startDateInputSettings = {
        spinners: true,
        label: 'Holiday Start',
        format: 'dd/M/yy'
    }

    endDateInputSettings = {
        steps: { day: 2 },
        label: 'Holiday End',
        formatPlaceholder: 'short'
    }
    render() {
        return (
            <div className="example-wrapper">
                <DateRangePicker
                    startDateInputSettings={this.startDateInputSettings}
                    endDateInputSettings={this.endDateInputSettings}
                />
            </div>
        );
    }
}

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

Configuring the Popup

To enable the passing of additional props to the Popup child component, configure the popupSettings.

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

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

class App extends React.Component {
    popupSettings = {
        animate: false,
        anchorAlign: {
            horizontal: 'center',
            vertical: 'bottom'
        },
        popupAlign: {
            horizontal: 'center',
            vertical: 'top'
        }
    }
    render() {
        return (
            <div className="example-wrapper" style={{ textAlign: 'center' }}>
                <DateRangePicker
                    popupSettings={this.popupSettings}
                />
            </div>
        );
    }
}

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

Configuring the MultiViewCalendar

To enable the passing of additional props to the MultiViewCalendar child component, configure the calendarSettings.

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

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

class App extends React.Component {
    calendarSettings = {
        bottomView: 'year',
        topView: 'decade',
        views: 1
    }
    render() {
        return (
            <div className="example-wrapper">
                <DateRangePicker
                    calendarSettings={this.calendarSettings}
                />
            </div>
        );
    }
}

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

In this article