When you type the time in the time picker, it changes the date to the current date, while it should change only the time portion.
---
ADMIN EDIT
A workaround is to use the original year, month and date portions of the view-model field and capture the time portion from the ValueChanged event:
@selectedTime?.ToString("F")
<TelerikTimePicker Min="@Min" Max="@Max" Format="hh:mm:ss tt"
Value="@selectedTime" ValueChanged="@( (DateTime? v) => ValueChangedHandler(v) )">
</TelerikTimePicker>
@code {
public DateTime Min = new DateTime(1900, 1, 1, 10, 0, 0);
public DateTime Max = new DateTime(1900, 1, 1, 20, 0, 0);
public DateTime? selectedTime { get; set; } = new DateTime(1900, 1, 1, 12, 0, 0);
void ValueChangedHandler(DateTime? updatedTime)
{
selectedTime = new DateTime(
selectedTime.Value.Year,
selectedTime.Value.Month,
selectedTime.Value.Day,
updatedTime.Value.Hour,
updatedTime.Value.Minute,
updatedTime.Value.Second
);
}
}---
The "SET" button is not visible when we open it and we are on the middle of the page: the button appears outside of the bottom of the page. So I have to close it, put the field to the top of the page, then open it again.
---
ADMIN EDIT
Some workaround, especially if most of your user base is on the same small form factor, is to use a bit of CSS to change the position of the dropdown to stick to the top of the viewport - this could potentially make it fit into screens as small as about 350x400px.
CSS
/*you can tweak the media query to target only the resolutions you want*/
@media(max-width: 500px) {
.top-aligned {
position: fixed;
top: 0;
left: 50%;
transform: translate(-50%, 0%);
/* you can also try translate(-50%, 50%) for a centered effect which may be better suited for laptop/tablet size */
}
}Component
Selected time: @selectedTime
<br />
<TelerikDateTimePicker Min="@Min" Max="@Max" @bind-Value="@selectedTime"
Format="dd MMM yyyy HH:mm:ss" Width="250px"
PopupClass="top-aligned">
</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);
}
---
The TimePicker scroll wheels are janky and difficult to use on mobile. They tend to jump around while scrolling with touch input.
Is this on the roadmap for improvement? We are working on a project and need to decide whether to roll our own TimePicker in the meantime.
(Note: this is an issue on both client/server side, but I am forced to choose one.)