Forms Support

The TimePicker supports a native KendoReact implementation of HTML5 form validation.

The forms supports enables you to validate input values and prevent the submission of forms which are in an invalid state.

Functionality and Features

Setting Validation Requirements

The TimePicker supports props for setting basic validation requirements—for example, the minimum and maximum time. The min, max, and required properties enable the user to pre-define minimum requirements which define the validity state of the component and allow a successful form submission.

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { TimePicker } from '@progress/kendo-react-dateinputs';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            success: false
        };
    }
    render() {
        return (
            <div className="row example-wrapper">
                <div className="col-xs-12 col-sm-6 offset-sm-3 example-col">
                    <div className="card">
                        <div className="card-block">
                            <form className="k-form" onSubmit={this.handleSubmit}>
                                <fieldset>
                                    <legend>Please select the time of your flight:</legend>
                                    <label className="k-form-field">
                                        <span>Departure</span>
                                        <TimePicker
                                            width="100%"
                                            name="departure"
                                            required={true}
                                        />
                                    </label>
                                    <label className="k-form-field">
                                        <span>Arrival</span>
                                        <TimePicker
                                            width="100%"
                                            name="arrival"
                                            required={true}
                                        />
                                    </label>
                                </fieldset>
                                <input type="submit" className="k-button k-primary" value="Search" />
                            </form>
                        </div>
                    </div>
                </div>
                {this.state.success && (
                    <div
                        className="alert alert-success"
                        style={{ position: 'absolute' }}
                    >
                        Form submitted!
                    </div>)}
            </div>
        );
    }

    handleSubmit = (event) => {
        event.preventDefault();
        this.setState({ success: true });
        setTimeout(() => { this.setState({ success: false }); }, 3000);
    }
}

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

Setting Custom Validation Messages

You can implement custom error messages which will be displayed when the TimePicker is in an invalid state and the user tries to submit the form. To render a custom validation message, set the validationMessage prop.

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { TimePicker } from '@progress/kendo-react-dateinputs';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            success: false
        };
    }
    render() {
        const today = new Date();
        const checkInValidationMessage = "Times in the past are not valid Departure times.";
        const checkOutValidationMessage = "The Arrival time is required.";

        return (
            <div className="row example-wrapper">
                <div className="col-xs-12 col-sm-6 offset-sm-3 example-col">
                    <div className="card">
                        <div className="card-block">
                            <form className="k-form" onSubmit={this.handleSubmit}>
                                <fieldset>
                                    <legend>Please select the time of your flight:</legend>
                                    <label className="k-form-field">
                                        <span>Departure</span>
                                        <TimePicker
                                            width="100%"
                                            name="departure"
                                            required={true}
                                            min={today}
                                            validationMessage={checkInValidationMessage}
                                        />
                                    </label>
                                    <label className="k-form-field">
                                        <span>Arrival</span>
                                        <TimePicker
                                            width="100%"
                                            name="arrival"
                                            required={true}
                                            validationMessage={checkOutValidationMessage}
                                        />
                                    </label>
                                </fieldset>
                                <input type="submit" className="k-button k-primary" value="Search" />
                            </form>
                        </div>
                    </div>
                </div>
                {this.state.success && (
                    <div
                        className="alert alert-success"
                        style={{ position: 'absolute' }}
                    >
                        Form submitted!
                    </div>)}
            </div>
        );
    }

    handleSubmit = (event) => {
        event.preventDefault();
        this.setState({ success: true });
        setTimeout(() => { this.setState({ success: false }); }, 3000);
    }
}

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

Enforcing the Validity State

The TimePicker enables you to set its validity state by utilizing its props. Setting the validity state allows for the implementation of complex validation scenarios that are based on multiple sources. To override the current validity state and apply the corresponding styles, use the valid prop.

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { TimePicker } from '@progress/kendo-react-dateinputs';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            departure: null,
            arrival: null,
            additionalComments: '',
            success: false
        };
    }
    render() {
        const now = new Date();

        return (
            <div className="row example-wrapper">
                <div className="col-xs-12 col-sm-6 offset-sm-3 example-col">
                    <div className="card">
                        <div className="card-block">
                            <form className="k-form" onSubmit={this.handleSubmit}>
                                <fieldset>
                                    <legend>Please select the time of your flight:</legend>
                                    <label className="k-form-field">
                                        <span>Departure</span>
                                        <TimePicker
                                            width="100%"
                                            name="departure"
                                            required={true}
                                            spinners={true}
                                            min={now}

                                            value={this.state.departure}
                                            onChange={this.handleChange}
                                            validationMessage={this.state.departure === null
                                                ? 'Departure time is required!'
                                                : 'Departure time cannot be in the past!'}
                                        />
                                    </label>
                                    <label className="k-form-field">
                                        <span>Arrival</span>
                                        <TimePicker
                                            width="100%"
                                            name="arrival"
                                            required={true}
                                            spinners={true}

                                            valid={(this.state.departure !== null && this.state.arrival !== null)
                                                && (this.state.departure.getTime() < this.state.arrival.getTime())}

                                            value={this.state.arrival}
                                            onChange={this.handleChange}
                                            validationMessage={this.state.arrival === null
                                                ? 'Arrival time is required!'
                                                : 'Arrival time cannot be before Departure time!'}
                                        />
                                    </label>
                                    <label className="k-form-field">
                                        <span>Additional Comments</span>
                                        <textarea
                                            className="k-textarea"
                                            style={{ width: '100%' }}
                                            name="additionalComments"
                                            value={this.state.additionalComments}
                                            onChange={this.handleChange}
                                        />
                                    </label>
                                </fieldset>
                                <input type="submit" className="k-button k-primary" value="Search" />
                            </form>
                        </div>
                    </div>
                </div>
                {this.state.success && (
                    <div
                        className="alert alert-success"
                        style={{ position: 'absolute' }}
                    >
                        Form submitted!
                    </div>)}
            </div>
        );
    }

    handleChange = (event) => {
        this.setState({
            [event.target.name]: event.target.value
        });
    }

    handleSubmit = (event) => {
        event.preventDefault();
        this.setState({ success: true });
        setTimeout(() => { this.setState({ success: false }); }, 3000);
    }
}

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

Disabling the Validation Styling

By default, to achieve a visual representation of its invalid state, the TimePicker applies the k-state-invalid class name to the wrapping component. To disable the utilization of k-state-invalid, set the validityStyles property to false.

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { TimePicker } from '@progress/kendo-react-dateinputs';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            departure: null,
            arrival: null,
            additionalComments: '',
            success: false
        };
    }
    render() {
        const now = new Date();

        return (
            <div className="row example-wrapper">
                <div className="col-xs-12 col-sm-6 offset-sm-3 example-col">
                    <div className="card">
                        <div className="card-block">
                            <form className="k-form" onSubmit={this.handleSubmit}>
                                <fieldset>
                                    <legend>Please select the time of your flight:</legend>
                                    <label className="k-form-field">
                                        <span>Departure</span>
                                        <TimePicker
                                            width="100%"
                                            name="departure"
                                            required={true}
                                            spinners={true}
                                            min={now}

                                            value={this.state.departure}
                                            onChange={this.handleChange}
                                            validationMessage={this.state.departure === null
                                                ? 'Departure time is required!'
                                                : 'Departure time cannot be in the past!'}
                                        />
                                    </label>
                                    <label className="k-form-field">
                                        <span>Arrival</span>
                                        <TimePicker
                                            width="100%"
                                            validityStyles={false}

                                            name="arrival"
                                            required={true}
                                            spinners={true}

                                            valid={(this.state.departure !== null && this.state.arrival !== null)
                                                && (this.state.departure.getTime() < this.state.arrival.getTime())}

                                            value={this.state.arrival}
                                            onChange={this.handleChange}
                                            validationMessage={this.state.arrival === null
                                                ? 'Arrival time is required!'
                                                : 'Arrival time cannot be before Departure time!'}
                                        />
                                    </label>
                                    <label className="k-form-field">
                                        <span>Additional Comments</span>
                                        <textarea
                                            className="k-textarea"
                                            style={{ width: '100%' }}
                                            name="additionalComments"
                                            value={this.state.additionalComments}
                                            onChange={this.handleChange}
                                        />
                                    </label>
                                </fieldset>
                                <input type="submit" className="k-button k-primary" value="Search" />
                            </form>
                        </div>
                    </div>
                </div>
                {this.state.success && (
                    <div
                        className="alert alert-success"
                        style={{ position: 'absolute' }}
                    >
                        Form submitted!
                    </div>)}
            </div>
        );
    }

    handleChange = (event) => {
        this.setState({
            [event.target.name]: event.target.value
        });
    }

    handleSubmit = (event) => {
        event.preventDefault();
        this.setState({ success: true });
        setTimeout(() => { this.setState({ success: false }); }, 3000);
    }
}

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

In this article