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:

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. 

I can't type AM or PM in the DateTimePicker to explicitly change to AM or PM.

For example:

1. Go to https://demos.telerik.com/blazor-ui/datetimepicker/overview.

2. Click on AM or PM in the DateTimePicker field.

3. Try to type "AM" or "PM".

4. If the time is "AM", notice that typing "PM" does not change "AM" to "PM", and visa-versa.

This causes our UI tests to fail when entering a date that has a different meridian time than the current time.

I expected the same behavior as the UI for ASP.NET Core: https://demos.telerik.com/aspnet-core/datetimepicker.

----------ADMIN EDIT----------

In the meantime, you can achieve the desired functionality by following the steps from the knowledge base article below.

Select AM/PM by pressing A or P on the keyboard - KB

Disabled Dates are only available in Date or DateRange pickers. They need to be in the DateTime pickers as well.
Now I am going to have to split my components into a Date Picker and a Time Picker, which isn't a great user experience.

DateTimePicker

DatePicker

 I want to to be able to catch the click of the Set button regardless of whether or not the value was changed.

==========

ADMIN EDIT

==========

For the time being, a possible workaround could be to use some JS Interop to catch the click of the Set button. You can create a custom OnOpen event for the DateTimePicker dropdown as per the admin edit example in this post. You can use the OnOpenHandler to invoke the JS responsible for catching the click event of the Set button. The example below demonstrates the described approach.

@inject IJSRuntime JSInterop

Selected time: @selectedTime
<br />
<span class="datetimepicker-span" @onclick="@OnOpenHandler">
    <TelerikDateTimePicker Min="@Min" Max="@Max" @bind-Value="@selectedTime"
                           Format="dd MMM yyyy HH:mm:ss" Width="250px">       
    </TelerikDateTimePicker>
</span>

@code {

    public bool isOpened { get; set; } = false;

    public async Task OnOpenHandler()
    {
        isOpened = !isOpened;

        if (isOpened)
        {            
            await JSInterop.InvokeVoidAsync("SetBtnClicked", ".k-time-accept");

            isOpened = false;
        }        
    }    

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

}

    <script>
        function SetBtnClicked(selector) {
            var element = document.querySelector(selector);
            element.addEventListener('click', function () {
                alert("Set button clicked");
            });
        }
    </script>

I'd like to have the ability to disable dates and times.

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?

Based on the example https://demos.telerik.com/blazor-ui/datetimepicker/overview, on Cancel or Set, the Input gets focused. On the mobile, it causes the keyboard to appear as well, which is not an intuitive behaviour.

Is it possible for this behaviour to be removed?

---

ADMIN EDIT

This behavior is OS specific, in our tests iOS does not exhibit it. It is generally up to the OS to show the soft keyboard and the web app should not be able to alter that.

Also, generally speaking from an accessibility point of view, popups must have a default focus (we do that), and when they close, they must return the user to the flow of the application in the place where they took it from. In this case, that's an interaction with the picker component.

Nevertheless, if the focus went to the button rather than the input, it is highly likely that the behavior would be resolved. The only downside would be that Android users will need a second action to get the focus back in the input.

---