Unplanned
Last Updated: 08 Feb 2021 15:30 by ADMIN
Karim
Created on: 19 Jun 2019 17:32
Category: DateTimePickers
Type: Feature Request
8
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.