Used a MacBook Pro for this test.

• Used the Telerik UI for Blazor Productivity Tools extension in VS Code
• Launch - Telerik UI for Blazor Template Wizard
  • template - dashboard
  • telerik version 5.1.1
  • enable localization
  • .net 7.0
• Create a razor file with the TelerikDatePicker component and a binded value attribute for selected date
  • The selected date variable should be set to a default DateTime value
    • I used new DateTime(2024,9,1)
  • The attribute Format is not used in the component
  • Below the component show the value for the System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern variable

• Comment out all TileLayoutItems from Tile Layout
• Add DatePicker component to a TileLayoutItem
• In your terminal run dotnet watch to run the app
  • English is the culture in the top right
  • The format of the default date in the datepicker should be MM/dd/yyyy
    • Date is 9/1/2024
    • ShortDatePattern is M/d/yyyy
  • Switch the culture to German
  • The format of the date value should be dd.MM.yyyy
    • Date is 9.1.2024
    • ShortDatePattern is dd.MM.yyyy

The Min and Max parameters of the DateInput, DatePicker and TimePicker don't work if the component Value is of type DateOnly or TimeOnly. Here is a test page:

<p>
    Allowed dates between @DateInputMin.ToShortDateString() and @DateInputMax.ToShortDateString(). Enter an invalid date:
</p>

Nullable DateTime (if out of range, will <strong style="color:green">nullify</strong>):
<TelerikDateInput @bind-Value="@NullableDateTimeValue"
                  Min="@DateInputMin"
                  Max="@DateInputMax"
                  Width="120px" />

@NullableDateTimeValue?.ToShortDateString()

<br />
<br />

DateTime (if out of range, will <strong style="color:green">autocorrect</strong>):
<TelerikDateInput @bind-Value="@DateTimeValue"
                  Min="@DateInputMin"
                  Max="@DateInputMax"
                  Width="120px" />

@DateTimeValue.ToShortDateString()

<br />
<br />

Nullable DateOnly (if out of range, will <strong style="color:red">accept</strong>):
<TelerikDateInput @bind-Value="@NullableDateOnlyValue"
                  Min="@DateInputMin"
                  Max="@DateInputMax"
                  Width="120px" />

@NullableDateOnlyValue?.ToShortDateString()

<br />
<br />

DateOnly (if out of range, will <strong style="color:red">accept</strong>):
<TelerikDateInput @bind-Value="@DateOnlyValue"
                  Min="@DateInputMin"
                  Max="@DateInputMax"
                  Width="120px" />

@DateOnlyValue.ToShortDateString()

@code {
    private DateTime DateTimeValue { get; set; } = DateTime.Today;
    private DateOnly DateOnlyValue { get; set; } = DateOnly.FromDateTime(DateTime.Today);

    private DateTime? NullableDateTimeValue { get; set; } = DateTime.Today;
    private DateOnly? NullableDateOnlyValue { get; set; } = DateOnly.FromDateTime(DateTime.Today);

    private DateTime DateInputMin { get; set; } = DateTime.Today.AddYears(-10);
    private DateTime DateInputMax { get; set; } = DateTime.Today;
}

The input should be focused after the user clicks the clear button.

Reproduceable example: https://blazorrepl.telerik.com/wSEgunbK46sVmd1p02

In my use case, I have custom components that wrap each of the telerik date controls (date picker, time picker, etc). They each expose a SelectedDate/SelectedTime/etc. bindable property. The SelectedDate is populated when the telerik control in my component (like TelerikDatePicker) fires OnChange. I use this instead of ValueChanged to avoid too many UI updates while the user selects a value in the UI, such as when typing. The OnChange event fires when the date input loses focus, but if the date input didn't have focus when the clear button is clicked, it never loses foucs and never fires OnChange. Let me know if this isn't intended to be supported and I should just be using ValueChanged instead, but to me OnChange would imply it would fire in all cases when the value can also change through ValueChanged, just less often.

Steps to reproduce (I used a TelerikDatePicker in the code above but I could reproduce this locally with date time picker and time picker - it's related to the underlying DateInput):

• Enter a date into the date picker, either through typing or using the calendar popup
• Cause the date picker to lose focus by clicking away
• Click the clear button
• Notice that the date is cleared from the UI control, but it doesn't call OnChange, so the date on the page never updates

When I discovered this locally, clicking the clear button would not clear the date visually from the date input as well as not updating the actual date variable. In the REPL, I was not able to replicate this - the date clears visually in the UI.

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

The DateInput rendering performance worsened in version 4.6.0 and the component renders more slowly. This is easily visible when there are multiple DateInputs on the page:

4.5.0: https://blazorrepl.telerik.com/mdPFuXFI02i7Ulbo52

4.6.0: https://blazorrepl.telerik.com/GdlbEXPe00IhfKWN29

When you check and uncheck the checkbox, the DateInputs appear more slowly with version 4.6.0.

There is also a Grid, which is commented out. If you show it, the virtual scrolling will exhibit a temporary freeze before rendering of the new rows - the user sees the loading skeletons for a second even after they have stopped scrolling.

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

If you use the FloatingLabel, when you tab into the DateInput control, the cursor is set at the very end of the text of the date format. However, if you do not use the FloatingLabel, and you tab into the DateInput control, the placeholder text is selected.

Reproduction: https://blazorrepl.telerik.com/wQlvclOZ14jEKaXU38.

===

ADMIN EDIT

===

The report is initially opened for DateInput, however, it also targets the rest of the date pickers that are compatible with FloatingLabel.

Hello,

Please add an AutoComplete parameter for the DateInput and the date/time pickers, so that browser auto-fill behavior can be controlled or even disabled, if it works incorrectly.

I would like to be able to configure the auto-tab behavior so that the DateInput only tabs when user type '/' (i.e. disable smart auto-tabbing).

month/day/year 

Expected UX:  3/3/2022
Example: https://demos.telerik.com/kendo-ui/dateinput/index 

Current UX: 332022
Example: https://demos.telerik.com/blazor-ui/dateinput/overview 

If you use the format "yyyy-MM-dd" type in a full value and go back to change the year part the focus changes to the month part.

For example enter 2022-01-10 and then go back with the mouse to the year part. Type in 20. The focus then changes to the month part before completing the year part.

This happens with other formats as well when you use MM. The leading zero seems to screw things up. If you play around with the control and changing stuff you will notice that the focus function does not work.

https://blazorrepl.telerik.com/GckPEjFb19imr0x607