How can I select time in time picker by using keyboard?


I want to select the time option in time picker by using the keyboard - Enter, totally not using the mouse. I'm using the tab key to move between the inputs. Then, how can I use the enter key to select the value? I've tried with some JS codes but It doesn't work.

The second question is Is there any way to modify the JS code of the OutSystems's patterns?



The help of the component is very clear:

The following keyboard shortcuts are available
-LEFT / RIGHT to move day to day.
-UP / DOWN to move week to week.
-DELETE to reset the date.
-ESCAPE to close the calendar.
-PAGE UP to move to the previous month.
-PAGE DOWN to move to the next month.
-SPACE / ENTER to select a date.

But I tried in a reactive app and I could get to the hours' section with Tab and use my Arrows to edit it.

I think the purpose of DatePicker is that you don't need to use keyboard, but I understand that time picking is not that easy. Most users don't know that they can use the mouse to slide in time.

For the second question, you can try to override functions, or simply clone the component and adjust it your way. I'm not a fan but, again, sometimes you just have to do it.


This is happening because the tabindex property automatically assigned by OutSystems is -1 for the time picker input and all the drop down values as well. I am not sure you would be able to change the tabindex of the values since they are added dynamically through the component.

To your next question, you can change the javascript by writing your own and referring to the existing elements based on the ids if they have name or classes as appropriate. If you are asking about changing the components javascript I don't think that is possible without overriding the component. Overriding a component is not recommended since you might not understand the whole code for the component and something else might breakup. Think about the maintenance and future upgrades, you will have a very complex task to maintain the changes.