Style and Appearance in Blazor Datetime Picker Component
14 Nov 20221 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 Datetime Picker container element
Use the following CSS to customize the appearance of Datetime Picker container element.
/* 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 Datetime Picker icons element
Use the following CSS to customize the Datetime Picker icons element.
/* 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 Datetime Picker
Use the following CSS to customize the time picker popup in the Datetime Picker.
/* To specify height */
.e-datetimepicker.e-popup {
height: 100px;
}
Customizing the Calendar popup of the Datetime Picker
Check the below section to customize the style and appearance of the Calendar component in the Datetime Picker.