Telerik Forums
UI for Blazor Forum
1 answer
4 views

Hello:

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

Georgi
Telerik team
 answered on 10 Jul 2025
1 answer
10 views
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
Tsvetomir
Telerik team
 answered on 04 Jul 2025
1 answer
10 views

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

 

Marco
Top achievements
Rank 3
Iron
Iron
Iron
 answered on 13 Jun 2025
0 answers
15 views
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;
        }
    }



Joel
Top achievements
Rank 2
Bronze
Iron
Iron
 asked on 22 May 2025
1 answer
29 views

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?

Hristian Stefanov
Telerik team
 answered on 20 May 2025
1 answer
27 views

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

 

 

Dimo
Telerik team
 answered on 09 May 2025
1 answer
27 views
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.
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
 updated answer on 22 Apr 2025
1 answer
86 views

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.

Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
 answered on 02 Apr 2025
1 answer
34 views

As you cas see from the sample below, i have a grid with row filter.

In the FilterCellTemplate i use a custom component named DateFilterCell.

In DateFilterCell i show a TelerikDatePicker.

When i run this sample and try to set the datepicker value from the calendar, the value does not bind.

What's wrong?

Thanks

https://blazorrepl.telerik.com/GfEFHkFA35AZCMp451

 

Tsvetomir
Telerik team
 answered on 31 Jan 2025
2 answers
127 views
Hello
I need a DatePicker with solar or Jalali or  hijri or Persian calendar.
Please help me.
Thanks
Mohamad Javad
Top achievements
Rank 2
Iron
Iron
Iron
 answered on 15 Jan 2025
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?