Completed
Last Updated: 28 Mar 2024 14:00 by Jakub
Release 5.1.0 (31 Jan 2024) (R1 2024)

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

Completed
Last Updated: 11 Mar 2024 15:41 by ADMIN
Release 2024 Q2 (May)

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

Completed
Last Updated: 28 Feb 2024 14:31 by ADMIN

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.

Completed
Last Updated: 28 Feb 2024 12:24 by ADMIN
Release 2024 Q2 (May)
The Now button is hard-coded in uppercase. I cannot change it even with Localization. I want to be able to provide different casing for the text in the button. 
Unplanned
Last Updated: 26 Sep 2023 13:14 by ADMIN

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.

 

 

Unplanned
Last Updated: 18 Sep 2023 09:08 by Richard

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>

Unplanned
Last Updated: 27 Jul 2023 11:38 by ADMIN
In our serverside blazor application we use the Telerik's DateTimePicker. When we type values in to the date time picker control, it jumps to the next section or to the end before completing the currect section. We use the format 'yyyy-MM-dd HH:mm'

It does not happen always and I think it is happenning when the internet connection is slow and it shows a Javascript error as well (screenshots below)
Duplicated
Last Updated: 16 May 2023 14:59 by ADMIN
Created by: John
Comments: 1
Category: DateTimePicker
Type: Bug Report
1

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"
   T="DateTime?"
   Value="@Value"
   ValueExpression="@ValueExpression"
   ValueChanged="@ValueChanged"
   OnChange="@OnChange"
   Class="@($"{InputClass}")"
   Enabled="@Enabled"
   Format="@DateTimeFormat.DateOnly"
   Min="@MinDateTime"
   Max="@MaxDateTime"
   Width="@Width"></TelerikDatePicker>
Unplanned
Last Updated: 08 Feb 2023 12:20 by Yanislav
Created by: Martin Herløv
Comments: 1
Category: DateTimePicker
Type: Bug Report
3

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

 

 

 

 

 

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: 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: 15 Jun 2020 15:30 by ADMIN
Created by: const
Comments: 0
Category: DateTimePicker
Type: Bug Report
2

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