Formats

You can control the format of the DateInput by using the format property, which accepts string parameters.

By default, the format property is set to 'd'. For more information on the date and number formats KendoReact supports, refer to the kendo-intl GitHub repository.

class App extends React.Component {
    state = { value: new Date(2017, 2, 10, 13, 30, 0) };

    render() {
        return (
            <div className="example-wrapper">
                <div className="col-xs-12 col-sm-6 example-col">
                    <p>Select a long date:</p>
                    <DateInput
                        format="dd-MMM-yyyy HH:mm:ss"
                        value={this.state.value}
                        onChange={this.changeDate}
                    />
                </div>
                <div className="col-xs-12 col-sm-6 example-col">
                    <p>Select a short date:</p>
                    <DateInput
                        format="MMMM yyyy"
                        value={this.state.value}
                        onChange={this.changeDate}
                    />
                </div>
            </div>
        );
    }

    changeDate = (event) => {
        this.setState({ value: event.value });
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

In this article

 /