Default Value

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

The DatePicker provides options for:

The DatePicker component is part of KendoReact, a professionally built commercial UI library. To try out this component you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.

Setting the Default Value

To set the initial value that is rendered by the DatePicker, 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 = new Date();

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

Setting the Default Popup State

To display the calendar popup when the DatePicker 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>DatePicker with default shown state</p>
                    <DatePicker
                        defaultShow={this.defaultShow}
                    />
                </div>
            </div>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);