Completed
Last Updated: 09 Sep 2022 05:13 by ADMIN
Release 3.6.0 (14 Sep 2022) (R3 2022)

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

Completed
Last Updated: 29 Jun 2022 13:34 by ADMIN
Release 3.4.0
When the Date*Picker is in the ToolBar of the Grid, the button is not positioned correctly to the width of the input
Completed
Last Updated: 08 Apr 2022 07:50 by ADMIN
Release 3.2.0

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. 

 

 

 

Unplanned
Last Updated: 16 Mar 2022 16:17 by ADMIN

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.

Completed
Last Updated: 15 Mar 2022 18:45 by ADMIN
Release 3.2.0
The TelerikDateTimePicker does not render the 24h time format in the dropdown tumbler. 
Unplanned
Last Updated: 11 Feb 2022 09:45 by Grant
Created by: Grant
Comments: 0
Category: DateTimePicker
Type: Feature Request
4
I have a case where I need the users to be able to change the date and time, but most will just be editing the time? Is there a way to default open to the Time Page rather than opening the Date page every time?
Unplanned
Last Updated: 11 Dec 2021 09:49 by ADMIN
Created by: Doug
Comments: 3
Category: DateTimePicker
Type: Feature Request
6

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

---

Unplanned
Last Updated: 06 Dec 2021 15:02 by ADMIN
Created by: NovaStor
Comments: 0
Category: DateTimePicker
Type: Feature Request
1

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

Duplicated
Last Updated: 25 Nov 2021 14:14 by ADMIN
Created by: Jake
Comments: 1
Category: DateTimePicker
Type: Feature Request
0

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

 

Unplanned
Last Updated: 08 Jul 2021 09:08 by ADMIN
Created by: Grant
Comments: 0
Category: DateTimePicker
Type: Feature Request
1

 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>

Unplanned
Last Updated: 08 Jul 2021 08:47 by ADMIN
The Set button should not be enabled when you change the month from the button in the popup, until the user selects a date too. 
Unplanned
Last Updated: 21 Jun 2021 11:22 by ADMIN
Created by: n/a
Comments: 0
Category: DateTimePicker
Type: Feature Request
2

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

Just an idea would be awesome to Add a object with a max and min properties which you can pass as a collection to the component.

Based on the current way how max and min work, but it disables ranges between each min and max of each object in that collection.
Completed
Last Updated: 12 Mar 2021 17:33 by ADMIN
Release 2.23.0
Created by: Dean
Comments: 15
Category: DateTimePicker
Type: Feature Request
25

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?

Unplanned
Last Updated: 02 Feb 2021 17:54 by ADMIN

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.

---

Unplanned
Last Updated: 15 Jun 2020 15:30 by ADMIN
Created by: const
Comments: 0
Category: DateTimePicker
Type: Bug Report
1

I want the user to only be able to select times between, for example, 11AM and 1PM. Setting Min and Max does not limit that, I can select any time:

Selected time: @selectedTime
<br />

<TelerikDateTimePicker Min="@Min" Max="@Max" @bind-Value="@selectedTime"
                       Format="dd MMM yyyy HH:mm" Width="250px"></TelerikDateTimePicker>

@code {
    private DateTime? selectedTime = DateTime.Now;
    public DateTime Min = new DateTime(2020, 6, 11, 10, 15, 0);
    public DateTime Max = new DateTime(2020, 6, 13, 12, 30, 45);
}