How To

The following section explains how to customize the TimePicker component in various aspects.

CSS customization

TimePicker allows you to customize the textbox and popup list appearance to suit for your application by using cssClass property.

The below sample demonstrates customization of the text appearance in a textbox, popup button, and popup list along with hover and active state by using e-custom-style class. Following is the list of available classes used to customize the entire TimePicker component.

Class Name Description
e-time-wrapper Applied to TimePicker wrapper element.
e-timepicker Applied to input element and TimePicker popup element.
e-time-wrapper.e-timepicker Applied to input element only.
e-input-group-icon.e-time-icon Applied to popup button.
e-float-text Applied to floating label text element.
e-popup Applied to popup element.
e-timepicker.e-popup Applied to TimePicker popup element only.
e-list-parent Applied to popup UL element.
e-timepicker.e-list-parent Applied to TimePicker popup UL element only.
e-list-item Applied to LI elements.
e-hover Applied to LI element hovering time.
e-active Applied to active LI element.
Source
Preview
index.tsx
style.css
import * as React from "react";
import * as ReactDOM from "react-dom";
//import the timepicker
//import the ripple effect
import { enableRipple } from '@syncfusion/ej2-base';
//import the timepicker
import { TimePickerComponent } from '@syncfusion/ej2-react-calendars';

// enable ripple effect
enableRipple(true);

class App extends React.Component<{}, {}> {
    render() {
        return <TimePickerComponent id="timepicker" cssClass="e-custom-style" placeholder="Select a Time" />
    }
};
ReactDOM.render(<App />, document.getElementById('timer'));
#container {
    visibility: hidden;
    max-width: 250px;
    margin: 0 auto;
}

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}
#timer {
    width: 250px;
    margin: 0 auto;
}

/*customize the input element text color*/
.e-time-wrapper.e-custom-style #element { /* csslint allow: adjoining-classes */
    display: block;
    color: blue;
}

/*customize the floating label and popup button text color*/
.e-time-wrapper.e-custom-style .e-float-text.e-label-bottom, /* csslint allow: adjoining-classes */
.e-time-wrapper.e-custom-style .e-input-group-icon.e-time-icon.e-icons { /* csslint allow: adjoining-classes */
    color: blue;
}

/*customize the input element text selection*/
.e-time-wrapper.e-custom-style.e-input-group::before, /* csslint allow: adjoining-classes */
.e-time-wrapper.e-custom-style.e-input-group::after, /* csslint allow: adjoining-classes */
.e-time-wrapper.e-custom-style.e-input-group .e-timepicker::selection { /* csslint allow: adjoining-classes */
    background: blue;
}


.e-timepicker.e-popup.e-custom-style .e-list-parent.e-ul, /* csslint allow: adjoining-classes */
.e-timepicker.e-popup.e-custom-style .e-list-parent.e-ul .e-list-item { /* csslint allow: adjoining-classes */
    background-color: #c0ebff;
}

/*customize the list item hover color*/
.e-timepicker.e-popup.e-custom-style .e-list-parent.e-ul .e-list-item.e-hover, /* csslint allow: adjoining-classes */
.e-timepicker.e-popup.e-custom-style .e-list-parent.e-ul .e-list-item.e-active.e-hover { /* csslint allow: adjoining-classes */
    background-color: blue;
    color: #fff;
}

/*customize the active element text color*/
.e-timepicker.e-popup.e-custom-style .e-list-parent.e-ul .e-list-item.e-active { /* csslint allow: adjoining-classes */
    color:#333;
    background-color: #fff;
}

Client side validation using FormValidator

To achieve the client side validation in a TimePicker component by using Essential JavaScript 2 FormValidator. It provides an option to customize the feedback error messages to the corresponding fields to take action to resolve the issue.

In the following example, the required field validation is implemented by mapping the name attribute value to the rules property. It validates the TimePicker component and displays the validation message when the textbox value is empty, during form post back or focus out.

Source
Preview
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
//import the timepicker
import { TimePickerComponent } from '@syncfusion/ej2-react-calendars';
//import the form validator related functions
import { FormValidator, FormValidatorModel } from '@syncfusion/ej2-inputs';
//import the ripple effect
import { enableRipple } from '@syncfusion/ej2-base';

// enable ripple effect
enableRipple(true);

class App extends React.Component<{}, {}> {

    public componentDidMount(): void {
        let options: FormValidatorModel = {
            rules: {
                //must specify the name attribute value in rules section with required validation
                'timepicker': { required: true }
            },
            customPlacement: (inputElement: HTMLElement, errorElement: HTMLElement) => {
                //to place the error message in custom position
                //inputElement - target element where the error text will be appended
                //errorElement - error text which will be displayed.
                inputElement.parentElement.parentElement.appendChild(errorElement);
            }
        };
        let formObject: FormValidator = new FormValidator('#form-element', options);
    }

    render() {
        return <TimePickerComponent id="timepicker" placeholder="Select a Time" />
    }
};
ReactDOM.render(<App />, document.getElementById('timer'));