Formats

You can control the format of the TimePicker by using format.

The format property accepts string parameters. By default, format is set to 't' and the value is formatted accordingly. For more information on the date and number formats KendoReact supports, refer to the kendo-intl GitHub repository.

class App extends React.Component {
    defaultValue = new Date(2000, 2, 10, 13, 30, 0);
    render() {
        return (
            <div class="example-wrapper">
                <div class="col-xs-12 col-sm-6 example-col">
                    <p>Select a long time:</p>
                    <TimePicker
                        format="HH:mm:ss"
                        defaultValue={this.defaultValue}
                    />
                </div>

                <div class="col-xs-12 col-sm-6 example-col">
                    <p>Select a short time:</p>
                    <TimePicker
                        format="hh:mm a"
                        defaultValue={this.defaultValue}
                    />
                </div>
            </div>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

In this article