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.

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

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

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. 

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

Is there any way to display the DateTimePicker and for the time picker to display time intervals of less than one second?  For example every 15 minutes?

Select a time:

15:00

15:15

15:30

15:45

etc?