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.
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);
}
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" />
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;
}
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.