How to change time picker value programmatically?

Hello all,

I have 2 time pickers: first for "Time from" and second for "Time to". I would like to change the value second time picker if first value greater than second. For example: by default first value is 10:00, second - 10:30. If user changes first time picker to 12:00, second should be 12:30.

If I change the variable that is assigned to input and do ajax refresh for second time picker I see that variable is correct but time picker displays 00:00

If I change the variable and change time pickers input value I see that time picker displays correct time, but dropdown diplays old value highlighted.

How I can change time picker value programmatically?

Thanks in advance

BR

Evgeny

Hi Evgeny,

Here an example with Javascript.
I set half an hour more automatically,


Create an action for Time 1 OnSelect event handler
In the action set second timer variable. Also, display value with javascript.

"document.getElementById('" + ITime2.Id + "').value = '" + Substr(Time2, 0, Length(Time2) -3) + "'"


Hope it helps.

With best regards,
F.Karatay

Ferhat Karatay wrote:

Hi Evgeny,

Here an example with Javascript.
I set half an hour more automatically,


Create an action for Time 1 OnSelect event handler
In the action set second timer variable. Also, display value with javascript.

"document.getElementById('" + ITime2.Id + "').value = '" + Substr(Time2, 0, Length(Time2) -3) + "'"


Hope it helps.

With best regards,
F.Karatay

Could you please attach your oml file to next post? Where I should write JavaScript function?

Thanks in advance

BR

Evgeny


Hi,

You should reference RunJavaScript action from HttpRequestHandler and put action into timepick1 select event.
Here is the oml: https://we.tl/t-wGN8zUiE8O

With best regards,
F.Karatay

Thanks for oml file.

But this solution doesn't work as expected

As you can see the time in second input is shown correctly, but in dropdown is old value highlighted.

Hi Evgeny,

Sorry for the late response. I had to check the details of the widget.
Actually, our code works fine on back-side as you mentioned in the previous conversation.

However, when you open it you can't see the correct time selected. The reason is CSS. The selected item class is "time-option time-option-selected". I checked official documentation about the widget however I couldn't find a quick solution about that.

https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Patterns/Using_Web_Patterns/Controls/TimePicker

I put some JS code to fix CSS after you select an item. Now it should work as you expect.

Here is the scenario; after you choose time1, time 2 set half an hour later automatically.

When you open it, you see correct line selected.


I want to add that you should test that code deeply.
Because of some browsers may not run the code. It works fine on Google Chrome

Here is the new link for OML; https://we.tl/t-nUjrNRfkDB

Hope it helps.

With best regards,
F.Karatay

Why not use something like html5 time picker?

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time

This should give you much more control without having to fiddle with javascript.

Or you could try a component from the forge. https://www.outsystems.com/forge/component-overview/5835/clocktimepicker (one of my own fiddles)

I personally hate those dropdown time pickers, not very use friendly.... there are much better more appealing options to take.