Controlled Mode

Premium

Updated on Dec 19, 2025

By default, the DateRangePicker is in an uncontrolled state.

The DateRangePicker provides options for:

• Controlling its value
• Controlling its popup state

Controlling the Value

To manage the date value of the DateRangePicker:

1. Use its value property.
2. Handle the onChange event.
3. Pass the new value through the props.

Loading ...

Controlling the Popup State

To manage the popup state of the DateRangePicker and define whether the calendar will be displayed, use its show property.

jsx

import * as React from 'react';
import { DateRangePicker } from '@progress/kendo-react-dateinputs';
import { Button } from '@progress/kendo-react-buttons';

export function App() {
    const [show, setShow] = React.useState(false);

    const handleClick = () => {
        setShow((prevShow) => !prevShow);
    };

    return (
        <div className="row">
            <div className="col-xs-12 col-md-12 example-col">
                <p>Controlled DateRangePicker</p>
                <DateRangePicker show={show} />
                &nbsp;
                <Button onClick={handleClick}>Toggle</Button>
            </div>
            <div className="col-xs-12 col-md-12 example-col">
                <p>Always shown</p>
                <DateRangePicker show={true} />
            </div>
        </div>
    );
}

Suggested Links

• API Reference of the DateRangePicker
• React Date Inputs