TimePicker Focus Specific Time on Open

Progress® Telerik® UI for ASP.NET Core Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Unplanned

Last Updated: 08 Feb 2021 15:30 by ADMIN

Karim

Created on: 19 Jun 2019 17:32

Category: DateTimePickers

Type: Feature Request

TimePicker Focus Specific Time on Open

Hey,

It would be very useful if the TimePicker component would have a feature called something like "AutoFocusTime()". By default, when there is no value inside the TimePicker, the default focused time is "12:00 am", therefore the user has to scroll up all the way to the required time. With the feature above, it would be possible to enter a time which should be focused by default. For example "8:00 am" which is when most businesses start operating.

Now the question is, why not just putting in a default value. Well, in a form with lots of inputs, the user may not know anymore which values he entered and which inputs have a default value set and therefore submitting wrong data. If a input doesn't have a default value this mistake can be caught by setting a [Required] attribute. Threfore, the user has to enter a value and it will be guaranteed that all values where entered by him and it wasn't a default value which has been set.

See ticket id 1412837.

5 comments

ADMIN

Georgi Denchev

Posted on: 08 Feb 2021 15:30

Hello Dennis,

Thank you for the input and the additional suggestions!

If/When work on a Feature Request begins, all of the provided feedback is taken into consideration.

Best Regards,
Georgi Denchev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Dennis

Posted on: 01 Feb 2021 21:26

I agree with Karim. The TimePicker (and DateTimePicker --> Time part) suffer with the time always starting at 12:00 AM.

The user may have to scroll quite a bit to get to the correct time. What could be done here to help is to use the rendering as shown in the ASP.NET AJAX TimePicker control

Timepicker shows 3 columns

It would be even better if it were 4 columns (or we could define columns as 1, 2 or 4). A 4 column rendering with an Interval setting of 15 minutes would mean that a single line would show the complete hour. (12:00, 12:15, 12:30, 12:45).

...OR...see my feedback request on having the new "modern" ComponentType respect the Interval setting.

ADMIN

Alex Hajigeorgieva

Posted on: 01 Jul 2019 15:35

Hello, Karim,

I am glad that the proposed suggestion works for you for the moment.

Hopefully, the request will gain popularity and we will see it built-in in the near future.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

Karim

Posted on: 26 Jun 2019 18:45

Thanks Alex, that works perfectly! However, I think that it would be really useful to have a property where you can just enter the scroll time and it does it out of the box.

I appreciate your effors!

ADMIN

Alex Hajigeorgieva

Posted on: 26 Jun 2019 16:46

Hello, Karim,

Thank you for the suggestion.

I believe it can be very useful indeed. Meanwhile, you could achieve the same functionality with a few lines of JavaScript:

- add an Open event handler
- check if the widget has no value
- set the timeView current to be the desired element
- scroll to it

Here is a runnable Dojo illustrating the result:

https://dojo.telerik.com/@bubblemaster/UyudaHal

@(Html.Kendo().TimePicker()

.Name("timepicker")

.HtmlAttributes(new { style = "width: 100%" })

.Events(e =>e.Open("focusDefault"))

)

<script>

function focusDefault(e){

var picker = e.sender;

if (!e.sender.value()) { // Run only if no value was selected

setTimeout(() => {

let containerElement = picker.timeView.list;

let listElement = containerElement.children().first();

containerElement.scrollTop(listElement.height() * 8 / 24);

picker.timeView.current(picker.timeView.list.find(".k-item:contains('8:00 AM')"));

}, 0);

}

</script>

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.