Questions on UI for Blazor Forum

1 answer

9 views

open DatePicker programmatically?

Hello:

As the subject line states, is there a way to open the DatePicker programmatically?

DatePicker

DateRangePicker

DateTimePicker

TimePicker

answered on 10 Jul 2025

1 answer

13 views

can we use telerikdatepicker with user's based date instead of server's date for "today" on calender

i am using TelerikDatePicker. I want to use user's timezone based date which i am getting in "OnAfterRenderAsync" but the telerikdatepicker is mixing up between server's date and user's timezone based date.
when i click today instead of selecting user's timezone based date(3 july), it selects the server based date i-e 2 july (which is different). Moreoever, as per in attached image user's timezone based date is 3 july 2025 and server's date is 2 july 2025 and the font of 2 july 2025 is red however the highlighter has moved to 3 july 2025.
I want the datepicker to use user's timezone based date and deal it like it has been dealing with server's date.

this is my razor page
<TelerikDatePicker Format="dd-MMM-yyyy"
@bind-Value="@abc.rcvdDateDW"
Enabled="@isDetailEditable"
OnOpen="OnDatePickerOpenDW"
OnClose="OnDatePickerCloseDW" />

this is how i am setting things up in my razor.cs
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender && !_initialized)
{
_initialized = true;

try
{
var userTimeZoneId = await tokenStorage.GetTokenAsync(UserTimeZoneInfokey);
var timeZoneId = string.IsNullOrWhiteSpace(userTimeZoneId) ? "UTC" : userTimeZoneId;
TimeZoneInfo userTimeZone = TimeZoneInfo.FindSystemTimeZoneById(timeZoneId);
userTimeInTimeZone = TimeZoneInfo.ConvertTimeFromUtc(DateTime.UtcNow, userTimeZone);
}
catch
{
userTimeInTimeZone = DateTime.UtcNow; // fallback
}
await ShowData();
InitializeTabsBasedOnPermissions();
await Tasks();

StateHasChanged();
}}
public async Task OnDatePickerOpenDW(DatePickerOpenEventArgs args)
{
if (abc.rcvdDateDW == null && !isTempDateDWReceived)
{
abc.rcvdDateDW = userTimeInTimeZone;
isTempDateDWReceived = true;
StateHasChanged();
}
}
public async Task OnDatePickerCloseDW(DatePickerCloseEventArgs args)
{
if (isTempDateDWReceived && abc.rcvdDateDW == userTimeInTimeZone)
{
abc.rcvdDateDW = null;
isTempDateDWReceived = false;
StateHasChanged();
}
}

thats the output i am getting

Does telerikdatepicker do support this or not ? if yes kindly guide me how can i achieve this. I have tried many ways but none of them worked. Thanks

Calendar

DatePicker

DateTimePicker

answered on 04 Jul 2025

1 answer

11 views

DatePicker visualization template for each day

Hy,

is there a way to customize the template visualization of each day in the DatePicker component?

I need to change the style and colors of the days according to different conditions. For examples:

Thanks in advance

DatePicker

answered on 13 Jun 2025

0 answers

17 views

Event Spamming from Controls

I have a custom grid filter where I use an animation container to show/hide. When a value changes, I want to close the animation container similar to how the filter automatically closes on your control filters (treelist). So, I have a button that toggles the filter state (ExpandCollapse). Then, when a value changes in my filter (textbox in example) I call a method that should close the filter and refresh my data. I find the OnChange event is called once a value is changed (textbox) but then also when the DatePicker closes and when the DropDownList closes and when the animation container is closed.

The result is the toggle kinda goes nuts. Its open/closed/opened at times where it shouldn't. How do I get around this?

                <div class="gsi-background-color-light" style="height: 41px; display:flex;justify-content:space-between;">

                    <div class="align-self-center gsi-font-kendo gsi-margin-0">
                        Patient Filters
                    </div>
                    <TelerikButton Id="filterChevronButton"
                                   FillMode="Clear"
                                   Class="gsi-border-width-0 gsi-border-color-white gsi-padding-8"
                                   Icon="@( FilterVisible? Telerik.SvgIcons.SvgIcon.Filter : Telerik.SvgIcons.SvgIcon.Filter)"
                                   OnClick="@(() => ExpandCollapse())" />

                </div>

                <TelerikAnimationContainer @ref="@AnimContainer"
                                           Class="gsi-background-color-light gsi-margin-5 k-rounded-0"
                                           Width="100%"
                                           Height="100vm">

                    <TelerikStackLayout Spacing="1px" Class="gsi-margin-5">
                        <TelerikCard Width="25vh">
                            <CardBody>

                                <div class="form-group-short">
                                    <label class="col-form-label" for="firstName">First Name</label><br />
                                    <TelerikTextBox @bind-Value="@FirstNameFilter"
                                                    Name="firstName"
                                                    Placeholder="-No Filter-"
                                                    OnChange="@(x => OnFilterChanged(nameof(FirstNameFilter), x))">
                                    </TelerikTextBox>
                                </div>

        private async Task OnFilterChanged(string propertyName, object newValue)
        {
            await GetPatients();
            ExpandCollapse(false);
        }

I tried to compare the existing value with the new value after removing the binding but, no success.

        private async Task OnFilterChanged(string propertyName, object newValue)
        {
            object existingValue = this.GetPropertyValue(propertyName);
            if (newValue != existingValue)
            {
                this.SetPropertyValue(propertyName, newValue);

                await GetPatients();
                ExpandCollapse(false);
            }
        }

Toggle

    public async void ExpandCollapse(bool? filterVisible = null)
    {
        if (filterVisible.HasValue)
        {
            await AnimContainer.ToggleAsync();
            FilterVisible = filterVisible.Value;
        }
        else
        {
            await AnimContainer.ToggleAsync();
            FilterVisible = !FilterVisible;
        }
    }

asked on 22 May 2025

1 answer

29 views

DatePicker Overflow Issue

We have a Blazor DatePicker in our web app to store the Date of Birth. The calendar popup seems to be working correctly. However, for the input portion, when typing in the year of the date, the content typed into the year overflows the input area for as long as the user types, instead of horizontally scrolling within the 4-digit year space.

The interesting thing is that this is only happening to one of our client users. We have been unable to duplicate this either locally or in our Dev/Test environments. I'm assuming that, since the horizontal scrolling of the year entry is within the DatePicker widget, could this possibly be due to an environment issue with the Blazor library or maybe some setting within Microsoft Edge?

I don't have as many details as I would like to have to share with you. At this time, I'm just trying to find out if you have ever heard of this issue before?

DatePicker

answered on 20 May 2025

1 answer

31 views

Open DatePicker popup in small space available create dom issue

Hi i have a DatePicker in a module form. If i resize the browser window in order to have low visible space below the datepicker, then i open the datepicker popup, it create a strange effect on the page.

For example i have this page with a datepicker (highligted in red):

if i open the datepicker popup the dom change adding white space on bottom of the page:

closing the popup, the white space disappear.

How to solve?

Thanks

DatePicker

answered on 09 May 2025

1 answer

27 views

Is there a way when I focus on TelerikDatePicker field the numeric keypad is automatically displayed

I am working on a mobile app using Blazor Hybrid, I have a TelerikDatePicker field on a page.
Is there a practical way when I focus on that field it automatically shows the numeric keyboard instead of alphanumeric keyboard ? like when using TelerikNumericTextBox.

Thank you.

DatePicker

updated answer on 22 Apr 2025

1 answer

89 views

Clear Date Picker Partial Dates Programmatically (Not Use ShowClearButton)

Hello,

I have a 2 date pickers. I have a button that clears all fields in my form which works when the dates are fully filled, but not if they are partially filled. I want to clear them with my button and not have to use the ShowClearButton (x button) that is built into the date picker. Not sure if there is already a solution for this, but I could not find one.

DatePicker