Time Ranges

The TimePicker provides options for displaying time ranges.

You can control the range of time values of the TimePicker by setting its min and max properties.

The TimePicker ignores the min and max date portions of the Date object and uses the date portion of the passed value. If no value is provided, the TimePicker uses the current Date.

The following example demonstrates how to limit the value of the TimePicker to a certain time range.

class App extends React.Component {
    min = new Date(2000, 2, 10, 2, 30);
    max = new Date(2010, 2, 10, 22, 15 );
    defaultValue = new Date(2010, 2, 10, 10, 0);

    render() {
        return (
            <div>
                <div className="example-config">
                    <p>Select a time:</p>
                    <TimePicker
                        min={this.min}
                        max={this.max}
                        defaultValue={this.defaultValue}
                    ></TimePicker>
                </div>
            </div>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

In this article