• Create a ListView
• Create a TimePicker within the ListView
• Set the Adaptive Mode on the TimePicker to Auto (This is key, if this property is removed it works)
• Run the page and switch to a mobile view format within the browse

@page "/test-timepicker-listview"

<h3>TimePicker in ListView Test</h3>

<TelerikListView Data="@TestItems" Width="100%">
    <HeaderTemplate>
        <div style="padding: 10px; background-color: #f0f0f0; font-weight: bold;">
            Time Entry Items
        </div>
    </HeaderTemplate>
    <Template>
        <div style="padding: 15px; border-bottom: 1px solid #ddd;">
            <div style="margin-bottom: 10px;">
                <strong>Item:</strong> @context.Name
            </div>
            <div style="display: flex; align-items: center; gap: 10px;">
                <label>Start Time:</label>
                <TelerikTimePicker @bind-Value="@context.StartTime" Format="hh:mm tt" Width="150px"
                    AdaptiveMode="AdaptiveMode.Auto" />
            </div>
            <div style="display: flex; align-items: center; gap: 10px; margin-top: 10px;">
                <label>End Time:</label>
                <TelerikTimePicker @bind-Value="@context.EndTime" Format="hh:mm tt" Width="150px"
                    AdaptiveMode="AdaptiveMode.Auto" />
            </div>
        </div>
    </Template>
</TelerikListView>

@code {
    private List<TimeEntryItem> TestItems { get; set; } = new();

    protected override void OnInitialized()
    {
        // Initialize with some test data
        TestItems = new List<TimeEntryItem>
{
new TimeEntryItem { Id = 1, Name = "Morning Shift", StartTime = new DateTime(2025, 11, 18, 8, 0, 0), EndTime = new
DateTime(2025, 11, 18, 12, 0, 0) },
};
    }

    public class TimeEntryItem
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
    }
}

Hello,

I noticed that when TelerikDatePicker and TelerikTimePicker components are used with nullable DateOnly and nullable TimeOnly values, respectively, and ShowClearButton is set to true, the "X" button still appears in an empty field when the value is null. This shouldn’t happen, as there is no value to clear. When you click on the field to type a date or time, the "X" button disappears.

Here is the reproduction of the issue:

https://blazorrepl.telerik.com/GfaCbmlz03hT2mky54

It doesn’t seem like this is intended behavior. If it’s not, is there a workaround to prevent the "X" from appearing when there is no value?

Thanks,

Ivaylo

Hi,

I've some TelerikCard components that host different other components but when using lets say the TelerikTimePicker then as soon as you try to input a time via keyboard it gets a red border and seems to invalidate the input.

When using the TelerikTimePicker outside in a simple div then it seems to work.

Also when using the popup to set the time it works. Only keyboard input seems to trigger some sort of validation.
When losing focus the timepicker resets to 00:00:00.

Here's the code of the razor page to replicate the problem:

<TelerikCard Width="20rem">
    <CardHeader>
        <CardTitle>Time Selector</CardTitle>
    </CardHeader>
    <CardBody>
        Startzeitpunkt<br>
        <TelerikTimePicker @bind-Value="@SelectedStartTime" Format="HH:mm:ss" Width="6rem" />
        <br>
        Endzeitpunkt<br>
        <TelerikTimePicker @bind-Value="@SelectedEndTime" Format="HH:mm:ss" Width="6rem" />
        <br>
    </CardBody>
    <CardSeparator></CardSeparator>
    <CardFooter>
        footer
    </CardFooter>
</TelerikCard>

@code {
    protected DateTime SelectedStartTime { get; set; }
    protected DateTime SelectedEndTime { get; set; }
}

I use the latest telerik blazor components 9.1.0 and VS 2022 17.14.9.

Maybe someone has a hint what's wrong with it.

Regards,
Thomas

Hello:

As the subject line states, is there a way to open the DatePicker programmatically?

I have a TelerikTimePicker component and I have set the ShowClearButton="true". The Value property of the component is bound to a nullable DateTime variable (e.g., DateTime? MyTime). If I first input/select a valid time and then clear the value (using the "x" button in the input field), the component is highlighted in red because the .k-invalid class has been added to the HTML markup. However, the value in the TelerikTimePicker is not actually invalid because a null value is allowed.

This is very similar to this issue for the TelerikDateTimePicker: https://feedback.telerik.com/blazor/1660917-datetimepicker-should-not-get-red-border-when-bound-to-nullable-datetime-and-the-input-is-empty

Hello
I want to write a desired text instead of calendar numbers.
For example, as specified in the attached file, I want to write the desired text (8 day of month) instead of the number 8.
I tried through the event:
OnCalendarCellRender="@OnCalendarCellRenderHandler"
but I did not get the result.
Please help me.

Hello
I want to display the desired text in the DatePicker after selecting the date from TelerikDatePicker.
Currently, after selecting the DatePicker, the date is displayed in this field, to which I want to add the desired text.
For example, in the DatePicker field after selecting the date, instead of
07/01/2025
, today is 07/01/2025.

If it is not possible to change the text, at least no text should be displayed in the DatePicker after selecting the date.

Please help me.
Code and image:

<TelerikDatePicker @bind-Value="DatePickerValue" >
</TelerikDatePicker>

@code {
	private DateTime DatePickerValue { get; set; } = DateTime.Today;
{

Hi, here's the scenario.

The time picker defaults to 0:00:00 <TimeOnly>:

 <TelerikTimePicker ID="txtPlayStart"
 @bind-Value="Value.playStart"
 Format="H:mm:ss"
 T="TimeOnly"
 ShowClearButton="true"/>

the user enters a time, saves it, all is well.

He realizes later he entered a bad time and wants to clear it.

He clicks the clear button, and saves it.

Imagine his surprise when nothing changes?

clear doesn't set it back to the default of 0:00:00?  there's a visual cue for the user (control is in red), but forcing them to enter 0:00:00 is not really appropriate?

Furthermore, if I catch the OnChange event, it fires when the user clicks the clear button, and it says the time is what it was before the user clicked clear. :/

I'm using the 7.1.0 that just came out yesterday.

I'm coming to realize that many of the Telerik Blazor components are pretty "bare bone" and some some sort of developer wrapper is required to make them user friendly.  (Except for "big" ones like the grid.)  Is that intentional?

I'm not seeing a way around this short of using the code and building my own custom version that I then have to keep up to date with every new release?

Thanks,

Charles

Hi, my goal is validate a form and focus telerik widget with validation errors.  

Now i can find the element search for class "k-invalid" but how to get the widget reference so i can call the FocusAsync() method?

Thanks

When clearing a nullable DateTime-bound TimePicker control (by highlighting the value and hitting delete), why does the control leave the "AM" and also border itself in red?

Is there a way configure the TimePicker control so it doesn't do this?