Default Value

By default, the TimePicker value is null and the TimeSelector popup is hidden.

The TimePicker provides options for:

Setting the Default Value

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

Setting the Default Popup State

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

In this article