Styling DatePicker Control

Radzen Studio Blazor Server
1

I try to change the background color of a DatePicker control. Therfore I use the OnRenderDate event with the following code:

args.Attributes.Add("style", "background-color:red !important;");

The problem is that the background of the calendar popup gets colored in red but not the background of the actual control in the page (the "text box" with the date). How can I change the color the input control of a DateTime picker?

2

Indeed this event is for customizing the appearance of the dates. To style the textbox do the following:

  1. Add a custom class attribute to your datepicker e.g. my-datepicker
  2. Add this CSS to your application's site.css file:
         .my-datepicker .rz-inputtext {
         background-color: red !important;
     }
3

Thanks for your reply. I know that I can customize the CSS but I chose this approach to change the color of the control on demand.

For simplictiy, I did not add any further code, but my actual event handler will look like this:

if (bigProblem)
  args.Attributes.Add("style", "background-color:red !important;");

So it does not help just modifying the global CSS. Isn't there any way to conditionally change the color of the control (textbox) when the date is rendered/chnaged?

4

The only way is to assign custom class depending on your requirement. Set the class attribute to a property page which you can update as needed e.g. red-datepicker or blue-datepicker.

5

@JustJoe: Did you found a solution for your problem?

6

No, only the suggested workaround by @korchev .

1 Like
7

Can you provide a code example?