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.
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:
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 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;
}
When the DateInput value is in February, AllowCaretMode is true and you type a date of 30 or 31, the caret will jump to the end of the textbox content, after the year segment.
Here is a test page: https://blazorrepl.telerik.com/cpkmugvl11AMdpgn21
<TelerikDateInput @bind-Value="@DateInputValue"
Format="dd/MM/yyyy"
AutoCorrectParts="false"
AutoSwitchParts="true"
AllowCaretMode="true"
Width="200px" />
When AutoCorrectParts is false and you type a date starting with 0, the caret will immediately move to the next DateTime format segment, before the user has typed the second date digit.
Test page: https://blazorrepl.telerik.com/cfOcaAbv48WGOUM530
<p><strong>Type 05 in the day segment:</strong></p>
@DateInputValue?.ToString("dd/MM/yyyy")
<br />
<TelerikDateInput @bind-Value="@DateInputValue"
Format="dd/MM/yyyy"
AutoCorrectParts="false" />
@code {
private DateTime? DateInputValue { get; set; } = new DateTime(2025, 2, 6);
}