Telerik Forums
UI for Blazor Forum
1 answer
6 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
11 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
0 answers
142 views

I use TelerikDateTimePicker and clients of my application send me a lot of issues with TelerikDateTimePicker.

1). If user types in values (date and time) quickly, user will be redirected to the end of input field e.g. type in year 2023 as fast as possible -> only one or two first digits will be filled, other digits will be typed in the end of the field




2) After user manually enters month, year is not selected automatically. Users want the same behaviour as we have with day, year, hours, minutes:




3)  After user finishes entering all valid values Date & Time and clicks outside the input field (TelerikDateTimePicker), all entered will be removed.

I use code like:

<label for="selected-date">
    TelerikDateTimePicker for enter Date and Time
</label>
<TelerikDateTimePicker 
    @bind-Value="@SelectedTime"
    Min="@Min" Max="@Max"
    Format="dd MMM yyyy HH:mm 'Z' (UTC)"
    Placeholder="dd MMM yyyy HH:mm 'Z' (UTC)"
    Id="selected-date"/>


@code {
    DateTime? SelectedTime = null;
    DateTime Min { get; set; } = new(1900, 1, 1, 0, 0, 0);
    public DateTime Max { get; set; } = new(2099, 12, 31, 23, 59, 59);
}


I also tried to use some combinations of TelerikDateTimePicker properties:

AllowCaretMode="true"
AutoCorrectParts="true"
AutoSwitchParts="true"

but this only made the behaviour worse

Alexey
Top achievements
Rank 1
Iron
 updated question on 27 Jan 2025
2 answers
129 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
2 answers
56 views

Hello
I want to write a desired text instead of calendar numbers.
For example, as specified in the attached file, I want to write the desired text (8 day of month) instead of the number 8.
I tried through the event:
OnCalendarCellRender="@OnCalendarCellRenderHandler"
but I did not get the result.
Please help me.

 

Mohamad Javad
Top achievements
Rank 2
Iron
Iron
Iron
 answered on 13 Jan 2025
1 answer
45 views

Hello
I want to display the desired text in the DatePicker after selecting the date from TelerikDatePicker.
Currently, after selecting the DatePicker, the date is displayed in this field, to which I want to add the desired text.
For example, in the DatePicker field after selecting the date, instead of
07/01/2025
, today is 07/01/2025.

If it is not possible to change the text, at least no text should be displayed in the DatePicker after selecting the date.

Please help me.
Code and image:

 


<TelerikDatePicker @bind-Value="DatePickerValue" >
</TelerikDatePicker>

@code {
	private DateTime DatePickerValue { get; set; } = DateTime.Today;
{

Hristian Stefanov
Telerik team
 answered on 08 Jan 2025
1 answer
67 views

I need to toggle the Enabled state of a TelerikDateTimePicker which resides inside a TelerikPopup based on the checked state of a TelerikCheckBox.  This works great outside of a popup, but once in a popup, the Enabled state no longer changes.

Here is a REPL: https://blazorrepl.telerik.com/cIlvvWbC29lZInK522

 


<div style="padding: 12px;">
    <p>Outside popup, toggling checkbox toggles enabled state:</p>
    <TelerikDateTimePicker @bind-Value="@SelectedTime"
                           Format="MM/dd/yyyy hh:mm tt"
                           ShowWeekNumbers="true"
                           Id="selected-date" Width="250px" Enabled="@(!chkNowSelected)">
    </TelerikDateTimePicker>

    <TelerikCheckBox Id="chkNow" @bind-Value="@chkNowSelected"    />
    <label for="chkNow">Now</label>
</div>

<div style="padding: 12px;">
<p>Inside popup, toggling checkbox does nottoggle enabled state:</p>
<TelerikPopup @ref="@PopupRef"
              AnchorSelector=".popup1"
              AnimationType="@AnimationType.SlideDown"
              AnimationDuration="300"
              Width="260px">
    <div style="padding: 20px;">
            <TelerikDateTimePicker @bind-Value="@SelectedTime"
                           Format="MM/dd/yyyy hh:mm tt"
                           ShowWeekNumbers="true"
                           Id="selected-date"  Enabled="@(!chkNowSelected)">
            </TelerikDateTimePicker>

            <TelerikCheckBox Id="chkNow" @bind-Value="@chkNowSelected"    />
            <label for="chkNow">Now</label>
    </div>
</TelerikPopup>
<TelerikButton OnClick="@OpenPopup" Class="popup1">
    Open Popup
</TelerikButton>

</div>

@code {
    #nullable enable

    private DateTime? SelectedTime = DateTime.Now;
    private bool chkNowSelected { get; set; } = true;
    private bool EndTimeEnabled { get; set; } = false;
    private TelerikPopup? PopupRef { get; set; }

    private void OpenPopup()
    {
        PopupRef?.Show();
    }
}

 

Erik
Top achievements
Rank 1
Iron
Iron
Iron
 answered on 18 Nov 2024
1 answer
197 views

Let's say we have a DateTimePicker two-way bound to a DateTime? value:

<TelerikDatePicker @bind-Value="searchCriteria.specificDate" ShowClearButton="true"></TelerikDatePicker>

public DateTime? specificDate {get; set; }           

The user enters an invalid value, such as 1/d/yyyy.

How do you reset it programmatically?

Assigning the bound value to null doesn't do anything, as it's already null.

I don't see a reset method anywhere?

It'd be nice if there was a way to programmatically call whatever is called when the user clicks on the ClearButton.

Thanks.

 

p.s.  This probably applies to all the date/time picker variations.

Dimo
Telerik team
 answered on 30 Oct 2024
1 answer
76 views

Hi, my goal is validate a form and focus telerik widget with validation errors.  

 

Now i can find the element search for class "k-invalid" but how to get the widget reference so i can call the FocusAsync() method?

 

Thanks

2 answers
235 views
I have a cases where I need the users to be able to change the date and time, but mostly will just be editing the time?  Is there a way to default open to the Time Page rather than opening the date page every time?
Andrew
Top achievements
Rank 2
Iron
 answered on 11 Oct 2024
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?