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:
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.
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;
}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.