Current day styling for datepicker #625

Closed
opened 2026-01-29 17:40:28 +00:00 by claunia · 1 comment
Owner

Originally created by @rdkleine on GitHub (Nov 8, 2022).

Is your feature request related to a problem? Please describe.
We would like to give the user an indication of the current day within the datepicker.

Describe the solution you'd like
Adding a 'current-day' class on the td of the day.

Describe alternatives you've considered
We going to hack something in javascript to find the current day. We'll find a way but would rather have a class on the current day.

Additional context
image

Something like adding a rz-current-day class:

@if (CurrentDate.Month == date.Month)
{
    <td @attributes="@(dateArgs.Attributes)" onmouseup=@(Inline || ShowTime || dateArgs.Disabled ? "" : $"Radzen.closePopup('{PopupID}')")
    @onclick="@(async () => { if (!Disabled && !dateArgs.Disabled) { await SetDay(date); } })">
        <span class=@($"rz-state-default{(DateTimeValue.HasValue && DateTimeValue.Value.Year == date.Year && DateTimeValue.Value.Month == date.Month && DateTimeValue.Value.Day == date.Day ? " rz-state-active" : "")}
{(!dateArgs.Disabled ? "" : " rz-state-disabled")}
{(date.Date.CompareTo(DateTime.Now.Date) == 0 ? " rz-current-day" : "")}")>@date.Day</span>
    </td>
}
Originally created by @rdkleine on GitHub (Nov 8, 2022). **Is your feature request related to a problem? Please describe.** We would like to give the user an indication of the current day within the datepicker. **Describe the solution you'd like** Adding a 'current-day' class on the [td](https://github.com/radzenhq/radzen-blazor/blob/dbf30f48694b0fa4618255811a8cde1c8b1bf615/Radzen.Blazor/RadzenDatePicker.razor#L79) of the day. **Describe alternatives you've considered** We going to hack something in javascript to find the current day. We'll find a way but would rather have a class on the current day. **Additional context** ![image](https://user-images.githubusercontent.com/3634357/200589789-0b83bc49-f3ff-4344-a3c6-9732c8dd6168.png) Something like adding a rz-current-day class: ``` @if (CurrentDate.Month == date.Month) { <td @attributes="@(dateArgs.Attributes)" onmouseup=@(Inline || ShowTime || dateArgs.Disabled ? "" : $"Radzen.closePopup('{PopupID}')") @onclick="@(async () => { if (!Disabled && !dateArgs.Disabled) { await SetDay(date); } })"> <span class=@($"rz-state-default{(DateTimeValue.HasValue && DateTimeValue.Value.Year == date.Year && DateTimeValue.Value.Month == date.Month && DateTimeValue.Value.Day == date.Day ? " rz-state-active" : "")} {(!dateArgs.Disabled ? "" : " rz-state-disabled")} {(date.Date.CompareTo(DateTime.Now.Date) == 0 ? " rz-current-day" : "")}")>@date.Day</span> </td> } ```
Author
Owner

@rdkleine commented on GitHub (Nov 8, 2022):

Thanks!

@rdkleine commented on GitHub (Nov 8, 2022): Thanks!
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#625