# Default Value

By default, the DateRangePicker value is `null` and the Calendar popup is hidden.

The DateRangePicker provides options for:

* [Setting its default value](https://www.telerik.com/kendo-react-ui-develop/components/dateinputs/daterangepicker/default-value#setting-the-default-value)
* [Setting the default state of its popup](https://www.telerik.com/kendo-react-ui-develop/components/dateinputs/daterangepicker/default-value#setting-the-default-popup-state)

## Setting the Default Value

To set the initial value that is rendered by the DateRangePicker, set the [`defaultValue`](https://www.telerik.com/kendo-react-ui-develop/components/dateinputs/api/daterangepickerprops#defaultvalue) property. This approach allows the component to display a value upon its initial render while remaining in an uncontrolled state.

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

## Setting the Default Popup State

To display the calendar popup when the DateRangePicker initially renders, set the [`defaultShow`](https://www.telerik.com/kendo-react-ui-develop/components/dateinputs/api/daterangepickerprops#defaultshow) property to `true`. This approach allows the component to show an open calendar popup while remaining in an uncontrolled state.

```jsx
const App = () => {
    return (
        <div className="row">
            <div className="col-xs-12 col-md-6 example-col">
                <p>DateRangePicker with default shown state</p>
                <DateRangePicker defaultShow={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)