Style and Appearance in Blazor DatePicker Component

25 Jan 20231 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 DatePicker container element

Use the following CSS to customize the appearance of DatePicker container element.

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

Customizing the DatePicker icon element

Use the following CSS to customize the DatePicker icon element

/* To specify background color and font size */
.e-input-group .e-input-group-icon:last-child, .e-input-group.e-control-wrapper .e-input-group-icon:last-child {
        font-size: 12px;
        background-color: darkgray;
}

Adding background color to DatePicker container element

You can customize the background color of the container element for the DatePicker by targeting its CSS class, input.e-input, and setting the desired color to the background-color property.

@using Syncfusion.Blazor.Calendars;

<SfDatePicker TValue="DateTime?"></SfDatePicker>

<style>
    .e-input-group input.e-input, .e-input-group.e-control-wrapper input.e-input {
        background-color: green; 
}
</style>

DatePicker with background color

Customizing the Calendar popup of the DatePicker

Mobile mode full screen calendar popup in material theme

We can render the full screen calendar popup in mobile device(s) by adding e-popup-expand class to the CssClass property of DatePicker component, Which supports both landscape and portrait orientations.

@using Syncfusion.Blazor.Calendars

<SfDatePicker TValue="DateTime?" CssClass="e-popup-expand"></SfDatePicker>

Landscape Mode

Potrait Mode

Also check the below section to customize the style and appearance of the Calendar component

Customizing Calendar’s style and appearance