# Controlled Mode

By default, the DateRangePicker is in an uncontrolled state.

The DateRangePicker provides options for:

* [Controlling its value](https://www.telerik.com/kendo-react-ui-develop/components/dateinputs/daterangepicker/controlled-state#controlling-the-value)
* [Controlling its popup state](https://www.telerik.com/kendo-react-ui-develop/components/dateinputs/daterangepicker/controlled-state#controlling-the-popup-state)

## Controlling the Value

To manage the date value of the DateRangePicker:

1. Use its [`value`](https://www.telerik.com/kendo-react-ui-develop/components/dateinputs/api/daterangepickerprops#value) property.
2. Handle the [`onChange`](https://www.telerik.com/kendo-react-ui-develop/components/dateinputs/api/daterangepickerprops#onchange) event.
3. Pass the new value through the props.

[Demo Source](https://demos.telerik.com/kendo-react-ui/dateinputs/daterangepicker/controlled/func/source.txt)

## Controlling the Popup State

To manage the popup state of the DateRangePicker and define whether the calendar will be displayed, use its [`show`](https://www.telerik.com/kendo-react-ui-develop/components/dateinputs/api/daterangepickerprops#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](https://www.telerik.com/kendo-react-ui-develop/components/dateinputs/api/daterangepickerprops)
* [React Date Inputs](https://www.telerik.com/kendo-react-ui-develop/components/dateinputs)