Questions on UI for Blazor Forum

0 answers

18 views

TelerikDatePicker does not clear value when invalid date is entered and value is set to null

I am using TelerikDatePicker in a Blazor component with a nullable DateTime bound value.
When a user manually enters an invalid date in the input field and then clicks a Clear/Reset button, the bound value is set to null, but the DatePicker UI does not clear the invalid text.

The expected behavior is that the DatePicker input should be cleared when the value is set to null, regardless of whether the user previously entered an invalid date.

Code Sample:

<div class="k-form-field">
    <label for="dosFrom">@Label From</label>
    <TelerikDatePicker
        Id="@($"{Id}-dosFrom")"
        @bind-Value="@DateTesting"
        Format="MM/dd/yyyy"
        Class="@($"{Id}-dosFrom calender-picker")">
        <DatePickerFormatPlaceholder Year="YYYY" Month="MM" Day="DD" />
    </TelerikDatePicker>
</div>

{{ @DateTesting }}

<TelerikButton
    ButtonType="Telerik.Blazor.ButtonType.Reset"
    OnClick="() => ClearDate()">
    Clear
</TelerikButton>

public DateTime? DateTesting { get; set; }

private void ClearDate()
{
    DateTesting = null;
}

Steps to Reproduce:

Focus on the DatePicker input.

Manually enter an invalid date (e.g., 9999 or only 09 for dd or only 10 for mm or random text).

Click the Clear button.

Observe that DateTesting becomes null, but the DatePicker input still shows the invalid value.

Expected Result:

The DatePicker input should be visually cleared when the bound value is set to null.

Actual Result:

The invalid text remains in the DatePicker input even though the bound value is null.

Question:

1. Is this expected behavior for TelerikDatePicker?
2. Is there a recommended way to force the DatePicker to clear the input when invalid user input exists?
3. Should ValueChanged, OnChange, or a component reference be used to handle this scenario?

Any guidance or best practice would be appreciated.

DatePicker

DateRangePicker

DateTimePicker

asked on 02 Feb 2026

1 answer

71 views

[Solved] open DatePicker programmatically?

Hello:

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

answered on 10 Jul 2025

1 answer

93 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

0 answers

283 views

How to fix cursor jumping to the end when I manually enter date and time in DateTimePicker

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

DateTimePicker

updated question on 27 Jan 2025

2 answers

329 views

[Solved] Persian , Hijri , Jalali or solar Calendar

Hello
I need a DatePicker with solar or Jalali or hijri or Persian calendar.
Please help me.
Thanks

answered on 15 Jan 2025

2 answers

129 views

[Solved] Custom Text In Calendar Cell With DatePicker

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.

answered on 13 Jan 2025

1 answer

149 views

[Solved] Custom Text In DatePicker

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;
{

DatePicker

DateTimePicker

TimePicker

answered on 08 Jan 2025

1 answer

111 views

[Solved] Enable/Disable DateTime picker inside a popup

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();
    }
}