Default Value

By default, the DateTimePicker value is null and the date-time selector popup is hidden.

The DateTimePicker provides options for:

Setting the Default Value

To set the initial value that is rendered by the DateTimePicker, 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>DateTimePicker with default value</p>
                    <DateTimePicker
                        defaultValue={this.defaultValue}
                    />
                </div>
            </div>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Setting the Default Popup State

To display a popup for the date-time selector when the DateTimePicker initially renders, set the defaultShow property to true. This approach allows the component to show an open popup for the date-time selector 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>DateTimePicker with default shown state</p>
                    <DateTimePicker
                        defaultShow={this.defaultShow}
                    />
                </div>
            </div>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
 /