DxDateEdit<T>.InputCssClass Property

Specifies CSS classes applied to the Date Edit‘s input.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v20.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public string InputCssClass { get; set; }

Property Value

Type	Description
String	The input’s CSS class names separated by a space.

Remarks

Use the InputCssClass property to apply pre-defined (for example, Bootstrap utilities) or custom CSS classes to the Date Edit’s input.

Pre-defined CSS classes

The following example applies the .bg-secondary contextual class to the input’s background color and hides the input’s border:

<DxDateEdit @bind-Date="@DateTimeValue" InputCssClass="bg-secondary border-0"></DxDateEdit>

@code {
    DateTime DateTimeValue { get; set; } = DateTime.Now;
}

Custom CSS classes

The following example demonstrates how to apply a custom style (my-style) to the Date Edit’s input:

<style>
    .my-style {
        opacity: 0.5;
        color: white;
        background-color: grey;
    }
</style>

<DxDateEdit @bind-Date="@DateTimeValue" InputCssClass="my-style"></DxDateEdit>

@code {
    DateTime DateTimeValue { get; set; } = DateTime.Now;
}

For more information about how to apply custom CSS classes to DevExpress Blazor components, refer to the following help topic: CSS Classes.