RadzenDatePicker GUI CSS style tweaks: choosable dates and read-only state #227

New Issue

claunia · 2026-01-29T17:33:47Z

claunia commented

2026-01-29 17:33:47 +00:00

Originally created by @szalapski on GitHub (Oct 13, 2021).

Originally assigned to: @yordanov on GitHub.

Is your feature request related to a problem? Please describe.
It isn't quite clear how the user can interact in a few cases. I have already made style changes to address this in my project; it would be easy for you to consider adding such styles by default; do you want to consider such? I'll provide the CSS I used below.

Describe the solution you'd like

Choosable dates should have visual feedback that it is choosable, as well as the "pointer" (finger) cursor, since clicking on such chooses the date and closes the popup.
Read-only fields should have visual feedback that it is read-only; this is often done in other controls with a light gray background.

Describe alternatives you've considered
The implementer can wrap their own CSS as I did, but maybe you'd like these styles built-in.

Additional context
Some CSS I used to get these two satisfied. Maybe you can use them as a basis.

/* 1 */
.rz-datepicker-calendar td .rz-state-default:hover {  /* is this right?  All dates, or can it be narrowed to choosable dates? */
    cursor: pointer;
    background-color: #e9e9e9;
}

/* 2 */
 /* note, I cannot find a good class to use for read-only cases of .rz-inputtext; you may need to establish one instead of my placeholder ".some-new-read-only-class" */
.rz-inputtext.some-new-read-only-class {  
        background-color: #e9e9e9;
}

Originally created by @szalapski on GitHub (Oct 13, 2021). Originally assigned to: @yordanov on GitHub. **Is your feature request related to a problem? Please describe.** It isn't quite clear how the user can interact in a few cases. I have already made style changes to address this in my project; it would be easy for you to consider adding such styles by default; do you want to consider such? I'll provide the CSS I used below. **Describe the solution you'd like** 1. Choosable dates should have visual feedback that it is choosable, as well as the "pointer" (finger) cursor, since clicking on such chooses the date and closes the popup. 2. Read-only fields should have visual feedback that it is read-only; this is often done in other controls with a light gray background. **Describe alternatives you've considered** The implementer can wrap their own CSS as I did, but maybe you'd like these styles built-in. **Additional context** Some CSS I used to get these two satisfied. Maybe you can use them as a basis. ```css /* 1 */ .rz-datepicker-calendar td .rz-state-default:hover { /* is this right? All dates, or can it be narrowed to choosable dates? */ cursor: pointer; background-color: #e9e9e9; } /* 2 */ /* note, I cannot find a good class to use for read-only cases of .rz-inputtext; you may need to establish one instead of my placeholder ".some-new-read-only-class" */ .rz-inputtext.some-new-read-only-class { background-color: #e9e9e9; } ```

claunia closed this issue

2026-01-29 17:33:48 +00:00

claunia commented

2026-01-29 17:33:48 +00:00

@akorchev commented on GitHub (Oct 14, 2021):

The Radzen.Blazor components do not currently include special styling for readonly mode (we do have disabled styling though).

Adding cursor: pointer and background on hover hast merit though and we will add it at some point.

@akorchev commented on GitHub (Oct 14, 2021): The Radzen.Blazor components do not currently include special styling for readonly mode (we do have disabled styling though). Adding cursor: pointer and background on hover hast merit though and we will add it at some point.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/radzen-blazor#227