The DateInput value disappears on focus when it is set with an async operation in OnInitializedAsync and AutoCorrectParts is false. Potentially related to Cannot select new DatePicker value from the Calendar when AutoCorrectParts is false

Test page with a workaround:

https://blazorrepl.telerik.com/cKkUaDbm09LYyPvg11

<p> The DateInput Value is: @DateValue </p>

@if (ShouldRenderDateInput)
{
    <TelerikDateInput @bind-Value="@DateValue"
                    Format="dd/MM/yyyy"
                    AutoCorrectParts="false"
                    Width="200px" />
}
@* the else block is optional to prevent delayed component appearance *@
else
{
    <TelerikDateInput @bind-Value="@DateValue"
                    Format="dd/MM/yyyy"
                    AutoCorrectParts="false"
                    Width="200px" />
}

@code {
    private DateTime? DateValue { get; set; }
    private bool ShouldRenderDateInput { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await Task.Delay(200);
        DateValue = new DateTime(2026, 06, 22);
        ShouldRenderDateInput = true;
    }
}

I produced this REPL: https://blazorrepl.telerik.com/QJbcvsFJ43Oc231U28

By clicking the Close X button on each DatePicker, the result shows the invalid state when the DatePicker uses a PlaceHolder.

I would like clarification on why this may be happening.

Or perhaps it is a bug.

Christopher Taleck

This is a continuation of public item DatePicker, TimePicker and DateTimePicker should accept null value as valid when bound to nullable DateTime

The problem persist when:

• The component Format includes a week day.
• The component Format is set with a standard date format string (d, D, g, etc.)

Test page with workarounds:

Bug due to week day format string inconsistency between .NET and JavaScript (dddd vs EEEE):

<TelerikDateTimePicker @bind-Value="@SelectedTime"
                       ShowClearButton="true"
                       Width="360px">
    <DateTimePickerFormatPlaceholder Weekday="week" />
</TelerikDateTimePicker>

<br />
<br />

Bug due to usage of a standard date format string:

<TelerikDatePicker @bind-Value="@SelectedTime"
                   ShowClearButton="true"
                   Format="d"
                   Width="360px">
    <DateTimePickerFormatPlaceholder Day="dd" Month="mm" Year="yyyy" />
</TelerikDatePicker>

@code {
    private DateTime? SelectedTime = DateTime.Now;
}

The DateInput / TimePicker display the current Format instead of the component Value when the current culture / localization is not English (en).

DateTime values show as expected.

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 input should be focused after the user clicks the clear button.

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

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 

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>

---

My users want to paste dates in the date inputs (date pickers in our case). This seems to work in Kendo, but does not work in Blazor, even when the format of the copied data matches the Format of the component.

<p>
    Try copying this date which is valid in the current format: 23/03/1998
    <br />
    then paste it in the date picker and see what happens to the <code>TheDate</code> field
</p>

@TheDate
<br />

<TelerikDateInput @bind-Value="TheDate" Format="dd/MM/yyyy" /> @TheDate.ToString("dd/MM/yyyy")

@code {
    DateTime TheDate { get; set; } = new DateTime(2019, 11, 27, 02, 03, 44);
}

---

ADMIN EDIT

Allowing the paste into the DateInput (and by extension date picker,...)  would have a lot of cases to control and that is why we have not yet enabled it. If the format is M/d/yyyy, for example, validation for numbers lower or equal to 12 would not be possible when the month is regarded. If the user pastes 8/2/2020 could mean two things - 8th of February 2020 or 2nd of August 2020. This might cause issues as the data that goes to the database might be incorrect and causing the application to misbehave.

That being said, how would you suggest handling the pasting of dates in the component. How would you like from us to handle the format difference of the dates? Please comment below.

---

See https://docs.telerik.com/blazor-ui/components/dateinput/supported-formats#two-digit-year-formats