DatePicker don't follow background classes

Radzen.Blazor Components
1

I was testing the DatePicker and it is the only one that does not follow the background color classes.

For example, let's say I would like to have the following:

image
image1014×389 8.09 KB

<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.Center" Gap="0.5rem" class="rz-p-sm-12">
    <RadzenLabel Text="Default TextBox" Component="TextBoxBindValue" />
    <RadzenTextBox @bind-Value=@value Style="width: 100%; max-width: 400px;" Name="TextBoxBindValue"  class="rz-background-color-base-500" />
</RadzenStack>

<EventConsole @ref=@console />

@code {
    string value;

    EventConsole console;

    protected override void OnAfterRender(bool firstRender)
    {
        if (value != null)
        {
            console.Log($"Value changed to {value}");
        }
    }
}

You can test all input components, and they are able to follow those classes. However, when tenting the DatePicker is the only one that is not able to show it. See below:

image
image1005×279 4.86 KB

<RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.Center" AlignItems="AlignItems.Center" Gap="0.5rem" class="rz-p-12">
    <RadzenLabel Text="Select Date" Component="RadzenDatePickerBindValue" />
    <RadzenDatePicker @bind-Value=@value Name="RadzenDatePickerBindValue" 
    class="rz-background-color-base-500"  ShowCalendarWeek />
</RadzenStack>

@code {
    DateTime? value;
}

Could you please let me know if there is a way to implement this?

Regards

2

Also, is there a way to implement TextAlign property as the other input components?

3

Here is what I see:

image
image1920×1080 234 KB

image
image1920×1080 297 KB

RadzenDatePicker isn't a single input like RadzenTextBox - it's a wrapper. The class you pass lands on the outer , but the field you actually see is an inner that has its own background from the theme. So rz-background-color-base-500 is applied to the wrapper, it's just hidden behind the input's own background sitting on top of it. RadzenTextBox works because there the class goes straight onto the input element itself.

Fix - use the InputClass parameter, which targets the inner input:

<RadzenDatePicker @bind-Value=@value Name="RadzenDatePickerBindValue"
InputClass="rz-background-color-base-500" ShowCalendarWeek />

On TextAlign: the DatePicker doesn't expose a TextAlign property, but you can get the same result through InputClass with a bit of CSS:

<RadzenDatePicker @bind-Value=@value InputClass="my-date-input" />

.my-date-input { text-align: right; }
1 Like
4

@enchev Thank you for your quick reply!
Awesome! That worked perfectly!