Time Limits

The TimePicker can display a time range between predefined min and max values, allowing the user to pick a time only from that range.

To define the start date of the range, use the min property. To define the end date of the range, use the max property. The min time value has to be lower than the max time value.

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

 /