Search results

Style and Appearance in Vue DateTimePicker component

24 May 2022 / 1 minute to read

The following content provides the exact CSS structure that can be used to modify the control’s appearance based on the user preference.

Customizing the appearance of DateTimePicker wrapper element

Use the following CSS to customize the appearance of wrapper element.

Copied to clipboard
/* To specify height and font size */
.e-input-group input.e-input, .e-input-group.e-control-wrapper input.e-input {
        font-size: 20px;
        height: 40px;
    }

Customizing the DateTimePicker icons element

Use the following CSS to customize the DateTimePicker icons element

Copied to clipboard
/* To specify background color and font size */
.e-datetime-wrapper .e-input-group-icon.e-date-icon, .e-datetime-wrapper .e-input-group-icon.e-time-icon {
        font-size: 16px;
        background-color: blanchedalmond;
    }

Customizing the time picker popup in the DateTimePicker

Use the following CSS to customize the time picker popup in the DateTimePicker

Copied to clipboard
/* To specify height */
.e-datetimepicker.e-popup {
        height: 100px;
}

Customizing the Calendar popup of the DateTimePicker

Please check the below section, to customize the style and appearance of the Calendar component in the DateTimePicker

Customizing Calendar’s style and appearance