I want to set the initially focused time/date for the DateTimePicker before opening the picker to improve the user experience. When opening the DateTimePicker with a null value the preselected date is the current day and the time is always 00:00/12:00AM.
I do not want to set value for the component but rather alter the time/date that will be initially focused when opening the popup.
===
ADMIN EDIT
===
The request also applies to the rest of the pickers - DatePicker, DateRangePicker and TimePicker.
The input in the DateTimePicker is valid when:
- the DateTimePicker value is bound to nullable DateTime and
- the user clears the input
In such cases, the input field shouldn't get a red border.
Here is a REPL example to reproduce the issue:
===ADMIN EDIT===
A possible workaround is to change the border color with CSS. Here is a REPL example.
Hello,
A Date/Time Picker is bound to a nullable DateTime value. If the user clears the value with the keyboard, the component will show as invalid (with red border). Instead, the picker should treat null values as valid.
Here is a test page with a few different workarounds:
<TelerikButton OnClick="@( () => DateValue = null )">Clear Value</TelerikButton>
<TelerikButton OnClick="@( () => DateValue = DateTime.Now )">Set Value</TelerikButton>
DateValue.HasValue: @DateValue.HasValue
<p>Default behavior:</p>
<TelerikDatePicker @bind-Value="@DateValue"
Width="200px" />
<p>Red border will disappear after blur (CSS):</p>
<TelerikDatePicker @bind-Value="@DateValue"
Width="200px"
Class="@( !DateValue.HasValue ? "valid-null" : "" )" />
<p>Red border will never appear (CSS):</p>
<TelerikDatePicker @bind-Value="@DateValue"
Width="200px"
Class="valid-null" />
<p>Red border will disappear after blur (OnChange):</p>
<TelerikDatePicker @bind-Value="@DateValue"
Width="200px"
OnChange="@OnPickerChange" />
<style>
.k-input.k-invalid.valid-null {
border-color: rgba(0, 0, 0, 0.08);
}
</style>
@code {
private DateTime? DateValue { get; set; } = DateTime.Now;
private async Task OnPickerChange(object newValue)
{
DateTime? newDate = (DateTime?)newValue;
if (!newDate.HasValue)
{
DateValue = DateTime.Now;
await Task.Delay(1);
DateValue = null;
}
}
}
In the TelerikDatePicker, when I select the date and click outside, the event triggers one time only, but when I do the same inside the TelerikDateTimePicker it triggers two times (the first when I set the time and the second when I click outside).
In the end of the ticket I will provide a simple demo code used in Telerik REPL for Blazor comparing the behaviour between the two elements.
Additionally I would like to report the fact that in the TelerikDateTimePicker, when there's no value and I open the calendar and click "Set" without doing anything else, the DateTime is set to "01/01/0001 00:00" instead of null.
If you are zooming a page containing a DateTimePicker with "AdaptiveMode" set to "AdaptiveMode.Auto", the application crashes occasionally with the error:
Microsoft.JSInterop.JSException: Cannot read properties of null (reading 'addEventListener') TypeError: Cannot read properties of null (reading 'addEventListener')
The more adaptive DateTimePicker instances the page contains, the more likely the error is to occur.
Hey Telerik team,
We encountered issue with DateTime picker which I was able to reproduce in your Documentation preview.
If you hover over the date time dropdown, but really slowly it bugs out and the view becomes unusable like this:
As you can see, the dropdown is messed up and it seems like the hover over the border is trying to trigger some action to change from date to time pick automatically
Jakub
Hi.
When entering an invalid date in a DateTimePicker, the component will automatically revert the entered value back to its previous valid value.
I didn't expect this because the user may type in an invalid date, and continue to the next input control within the form, and not notice the error that was briefly displayed.
The issue can be reproduced in the DateTimePicker Demo here: https://demos.telerik.com/blazor-ui/datetimepicker/validation
Steps to reproduce:
1. Click in the day part of the date.
2. Enter 13
3. Enter 2100
4. Press the Tab key
5. Notice the date is automatically reverted (back) to 10/13/2019.
I expected the date to be set to 10/13/2100 with the input validation errors visible to the user after pressing the Tab key in step 4.
I've categorized this issue as a bug because otherwise, the form can be submitted with a value that the user did not enter.
If this behavior cannot be changed from being the default behavior, then there should be an option to prevent this behavior from happening.
Thank you.
Some users report that the hour selector of the datetime picker is not visible. For some people it starts to show if you move the scroll wheel. For some that does not help. This does not happen for all users and can be tricky to replicate. I can replicate it on certain zoom levels and resolutions.
I can replicate this on the demo site. Screenshot added.
I can also make it work again by removing "translateY(93px)". Screenshot added.
When the component's Adaptive mode is set to Auto, the Date & Time buttons in the popup are not rendered.
<AdminEdit>
Here is a CSS workaround that hides the titlebar in adaptive mode so that the buttons are present:
<style>
.k-actionsheet-titlebar.k-text-center{
display: none;
}
</style>
<TelerikDateTimePicker @bind-Value="@SelectedTime"
Format="MM/dd/yyyy hh:ss"
ShowWeekNumbers="true"
Id="selected-date"
AdaptiveMode="Telerik.Blazor.AdaptiveMode.Auto">
</TelerikDateTimePicker>
@code {
private DateTime? SelectedTime = DateTime.Now;
}
</AdminEdit>
Hi,
I have a REPL showing the issue.
I am using DataAnnotation where possible in my application and I was expecting the DisplayFormat attribute to be applied in the DateTimePicker like it is for DatePicker but as shown in the REPL link below it's not. I will use a workaround of applying the Format attribute everywhere but I would appreciate this being changed.
https://blazorrepl.telerik.com/GdkpcclE28sZ9VZH54
Hey,
Just reporting this as an active bug. If I have a nullable DateTime object, and I erased the date on the date time picker, it treats the date time field as invalid. I would expect it to be treated as valid.
Related thread: https://feedback.telerik.com/blazor/1582282-datepicker-should-accept-null-value-as-valid-when-bound-to-nullable-datetime
This is the razor page:
<TelerikDatePicker Id="@Id"DateTimePicker loses focus when the NOW button is clicked.
To reproduce the problem open the following demo:
https://demos.telerik.com/blazor-ui/datetimepicker/overview
Try clicking a few times on the NOW button. The focus is occasionally lost.
https://www.screencast.com/t/BPEXTy43
Add "OnOpen" event that fires when the DateTimePicker button is clicked but before the DateTimePicker dropdown is shown
=============
ADMIN EDIT
=============
You can currently achieve the desired behavior by wrapping the DateTimePicker in a container (for example span), add a handler on the on-click event of the span to catch the click event and perform the desired actions in that handler.
<span class="datetimepicker-span" @onclick="@OnOpenHandler">
<TelerikDateTimePicker Class="my-date-time-picker" Value="@selectedTime"
Format="dd MMM yyyy HH:mm:ss" Width="250px"></TelerikDateTimePicker>
</span>
@code {
public DateTime? selectedTime { get; set; }
public bool isOpened { get; set; } = false;
public void OnOpenHandler()
{
isOpened = !isOpened;
if (isOpened)
{
Console.WriteLine("DateTimePicker was opened.");
}
else
{
Console.WriteLine("DateTimePicker was closed.");
}
}
}
If you enter a format with a 24 hour time( Format="dd MMM yyyy HH:mm:ss") for the Timepicker
If you enter the same format for the DateTimePicker the TimePicker in the DateTimePicker looks like this:
It seems like this is a bug as the only way I can change the DateTimePicker time UI is to alter my language/culture whereas the TimePicker displays correctly based on my format.
With Blazor server, clicking the NOW button (obviously) sets the time to the time on the server since that's where the code is running. Is there a way to trap the NOW button click or somehow give it an offset or define the value that NOW means so NOW will mean the time that the user is sitting in?
---
ADMIN EDIT
One way this could land could be through templates for the header areas of the calendars - that would let you put your own NOW button there so you can handle its click and change the value as desired. So, you may want to follow and/or Vote for this approach here: https://feedback.telerik.com/blazor/1468855-header-template-for-the-calendars.
A workaround for the time being could be hiding the Now button with some CSS:
<style>
.no-now-button .k-time-now {
display: none;
}
</style>
Selected time: @selectedTime
<br />
<TelerikDateTimePicker PopupClass="no-now-button"
Min="@Min" Max="@Max" @bind-Value="@selectedTime"
Format="dd MMM yyyy HH:mm:ss" Width="250px"></TelerikDateTimePicker>
@code {
private DateTime? selectedTime = DateTime.Now;
public DateTime Min = new DateTime(1990, 1, 1, 8, 15, 0);
public DateTime Max = new DateTime(2025, 1, 1, 19, 30, 45);
}
---