Focused Dates

The DateRangePicker enables you to handle the configuration of the focused calendar dates.

The calendar of the DateRangePicker always displays a focused date and, by default, the focused date is today's date. To change the focused date, use the focusedDate property by setting it to a specific Date value. The Date value has to be a valid JavaScript Date object.

class App extends React.Component {
    picker;
    componentDidMount() {
        if(this.picker.calendar && this.picker.calendar.element) {
            this.picker.calendar.element.focus();
        }
    }
    render() {
        return(
            <DateRangePicker
                ref={(el) => { this.picker = el; }}
                show={true}
                focusedDate={new Date(1997, 2, 20)}
            />
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

In this article