Default Value

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

The DateRangePicker provides options for:

Setting the Default Value

To set the initial value that is rendered by the DateRangePicker, set the defaultValue property. This approach allows the component to display a value upon its initial render while remaining in an uncontrolled state.

class App extends React.Component {
    defaultValue = { start: new Date(2018, 8, 5), end: null }

    render() {
        return(
            <div className="row">
                <div className="col-xs-12 col-md-12 example-col">
                    <p>DateRangePicker with default value</p>
                    <DateRangePicker
                        defaultValue={this.defaultValue}
                    />
                </div>
            </div>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Setting the Default Popup State

To display the calendar popup when the DateRangePicker initially renders, set the defaultShow property to true. This approach allows the component to show an open calendar popup while remaining in an uncontrolled state.

class App extends React.Component {
    defaultShow = true;

    render() {
        return(
            <div className="row">
                <div className="col-xs-12 col-md-6 example-col">
                    <p>DateRangePicker with default shown state</p>
                    <DateRangePicker
                        defaultShow={this.defaultShow}
                    />
                </div>
            </div>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

In this article