Incremental Steps

By default, the TimePicker increments or decrements each part of its time values by one step.

To change the default setup, use the steps property.

The available options are:

  • hour: Number—Controls the incremental step of the hour value.
  • minute: Number—Controls the incremental step of the minute value.
  • second: Number—Controls the incremental step of the second value.
class App extends React.Component {
    steps = {
        hour: 2,
        minute: 15,
        second: 30
    };
    defaultValue = new Date(2000, 2, 10, 10, 30);
    render() {
        return (
            <div className="example-wrapper">
                <p>Select a time:</p>
                <TimePicker
                    format="HH:mm:ss"
                    steps={this.steps}
                    defaultValue={this.defaultValue}
                />
                <p>(↑ to increment and ↓ to decrement the value)</p>
            </div>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

In this article