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