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 handlerIn 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:
Could you please attach your oml file to next post? Where I should write JavaScript function?
Hi,You should reference RunJavaScript action from HttpRequestHandler and put action into timepick1 select event.Here is the oml: https://we.tl/t-wGN8zUiE8OWith 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/TimePickerI 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 ChromeHere is the new link for OML; https://we.tl/t-nUjrNRfkDBHope 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.