Formats

You can control the format of the DateTimePicker by using the format property.

The format property accepts string parameters and, by default, is set to 'MM/dd/yyyy HH:mm:ss'. When format is set and the input element is not focused, 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 className="example-wrapper" style={{ minHeight: '400px' }}>
                <div className="col-xs-12 col-sm-6 example-col">
                    <p>Select a long date-time: </p>
                    <DateTimePicker
                        format={"dd-MM-yyyy hh:mm:ss a"}
                        defaultValue={this.defaultValue}
                        width={200}
                    />
                </div>
                <div className="col-xs-12 col-sm-6 example-col">
                    <p>Select a short date without time parsing:</p>
                    <DateTimePicker
                        format={"dd MMMM | HH:mm"}
                        defaultValue={this.defaultValue}
                    />
                </div>
            </div>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
In this article
 /