RadzenDatePicker tweak request

Radzen.Blazor Components
1

Hello Radzen Team!

The RadzenDatePicker, when set to TimeOnly and Inline, takes so much space.

image
image1920×1040 91.7 KB

image
image1920×1040 126 KB

It would be so good if its size changes according to which design properties are set.

The RadzenNumeric's inside the RadzenDatePicker could also have the same height of other RadzenNumeric's.

I don't know why this component has been used to both Dates and Times, but it could get messy in the future according to the amount of configurations. Telerik has separate components for each type, and some sort of Date/Time range components. If these are planned to be added in the future in Radzen, then again, better make individual components.

2

Everything in the Radzen component suite can be customized via CSS.

Not sure what's the issue here. What could get messy? You can always use two Radzen numeric components side by side if you don't like the appearance or the default RadzenDatePicker or tweak the CSS to your preference.

You are free to use components from any vendor! Radzen however provides design time support only for Radzen components.

3

We will make the inputs used in the DatePicker the same size as the standalone Numeric.

1 Like
4

Which property in the .css should I change to effectively change the Hour/Minute Numeric's inside the DatePicker?

I tried many combinations but couldn't achieve it. Also, the numerics look right in the designer but not in runtime:

image
image1920×1040 68.6 KB

image
image1920×1040 86 KB

5

You can use your browser's developer tools to inspect the Radzen components

image
image2872×1710 621 KB

Are you using a custom theme? You may need to update it by going to the application settings and clicking save. This should generate a new CSS.

1 Like
6

I need some extra help on this one. After tweaking lots of things in the .css class, there's one thing that I can't change, which is the component's width. Here's how it's set:
image

I need to change that 320px width, but I don't know how.

7

Via the !important modifier.

1 Like
8

Regarding cultures in the DatePicker, I might be missing something but it's not using the custom one.

image
image1920×1040 101 KB

image
image1920×1040 62 KB

I know Startup.cs is in the ignore list, so I copied the generated code from another app.

            services.AddLocalization();
            var supportedCultures = new[]
            {
                new System.Globalization.CultureInfo("pt-BR"),
            };
            services.Configure<RequestLocalizationOptions>(options =>
            {
                options.DefaultRequestCulture = new Microsoft.AspNetCore.Localization.RequestCulture("pt-BR");
                options.SupportedCultures = supportedCultures;
                options.SupportedUICultures = supportedCultures;
            });
9

There is also code in the Configure method in Startup.cs:

            var supportedCultures = new[]
            {
                new System.Globalization.CultureInfo("pt-BR"),
            };

            app.UseRequestLocalization(new RequestLocalizationOptions
            {
                DefaultRequestCulture = new Microsoft.AspNetCore.Localization.RequestCulture("pt-BR"),
                SupportedCultures = supportedCultures,
                SupportedUICultures = supportedCultures
            });
1 Like