The DateInput and all related date/time pickers display 1970/1/1 after programmatic Value clearing and subsequent focus.
The behavior was correct until version 4.6.0 inclusive.
<TelerikDateInput @bind-Value="@DatePickerValue"
Width="200px">
</TelerikDateInput>
<TelerikButton OnClick="@( () => DatePickerValue = default )">Clear Value</TelerikButton>
@code {
private DateTime? DatePickerValue { get; set; } = DateTime.Now;
}
Using Telerik Blazor 4.0.1. Previously on 3.5.0, there were no issues. The only other difference is .NET 7.0.
Create a blank Telerik Blazor Server project and use the attached index.razor. In the OnInitialized, there are two lines that set the DateTime. The first one works but the second one results in the TelerikDateInput field showing h:mm AM instead of 12:00 AM.
Am I doing something wrong? If so, what changed from 3.5 to experience this?
Thanks,
Chuck
Currently, if the component has DebounceDelay and loses focus before the delay has passed, the Blur event is fired before the ValueChanged event.
This bug extends to DateInput, DatePicker, DateTimePicker, and DateRangePicker
Hi,
This is easily viewable in your demos. Using Safari, go to:
https://demos.telerik.com/blazor-ui/dateinput/overview
Try to use keyboard arrows left and right and up/down to change date. It doesn't hold the selected date part.
Works fine in Chrome / Firefox.
Create the WebAssembly CRUD example from the New Project Wizard and go to the Form page.
Type a year in the date picker. Do not remove the focus and type another year. After doing this a few times the input visibly lags and the form becomes slow.
---
ADMIN EDIT
A potential workaround could be to disable the pointer events so that the users will have a harder time focusing the input so they are more likely to use the drodown to choose dates:
.k-datepicker .k-dateinput input {
pointer-events: none;
}
<TelerikDatePicker Value="@person.StartDate"
OnChange="@( (object dt) => person.StartDate = (DateTime)dt )"
ValueExpression="@( () => person.StartDate )"
Width="100%" Id="StartDateDP">
</TelerikDatePicker>
---
Recreational steps:
1. Typed "05"
2. Typed "right arrow" (select month part)
3. Typed "03"
4. Typed "right arrow" (select year part)
5. Tried typing "2020"... but as you can see things went strangely.