Joao,

Here is what I see when I load and run your sandbox:

On first page load:

I click on the input tab

I change the hour to be 10 by clicking on the 8 at the top and then selecting 10 and now look at the input field value:

Lastly I click on the 16 to select the date of the 16th which closes the picker and the result is

So yes, the value you are getting out of the handler and loading into the separate variable is correct - however, if you look at the input field itself the time is 00:00.  I am using this in a form where a person selects a date/time so what they would see as the result of this is that they picked midnight of 1/16/2021.  This was loading the sandbox espace that you provided.

So the conclusion is whenever you choose the date part, the time part gets reset to 0:00, is that it?
I confess I went through the "happy flow" of first picking date and then the time.

If that is the case, I can see how it can be troublesome but in that case, I would create two separate fields: one for the date and one for the time. Personally as a user, I actually prefer to pick first the day and then the time on separate fields as it is more intuitive to me.

Regards,
João

Joao, I agree that it would work that way - but it "should" work either way.

Also, looking into this further - it looks like there isn't a built in "clock" time picker?

Benjith, THANK YOU!  It looks like that fixed it.  Hopefully OutSystems takes your fixes and fixes the built in one soon.

You're welcome, Jason.

Glad to help you :)

Kind regards,

Benjith Sam

I believe I found one more issue - if someone opens the date picker and clicks on a date, this fires the on select action.  However, if someone opens the date picker, changes the time and then clicks off of the date picker, it looks like it does write the value to the input widget, but it doesn't seem to trigger either the on select for the DatePicker or trigger the "OnChange" on the input widget itself.  I am still testing this out but this is what I found.  Any ideas for fix on this?  I would say if they click off of the widget and have changed anything, that should trigger the onselect of the calendar widget if its going to write that new value back to the input widget.

Update to this - the case I have is where when they enter a time, we want to move the minutes selected to the next 15 minute increment.  So if they pick 12:05, I want the final value to be 12:15.  When they change the time it does actually fire the on-select, however, if in the "on select" event handler I change the input widget variable to be 12:15, when the datePicker finishes closing, it still writes 12:05 to the input widget and doesn't trigger the input widgets on change variable.  

Yes, I could update the times when the user does something else on the form (like hitting save) but for affordance I would like it to change the time immediately.  Any ideas around this one?

Ok, to demo what I am seeing as far as the behaviour of the calendar widget.

I have a start date/time and an end date/time.  I have an input for each with a datepicker attached to it.  The onSelect handler for the start date/time first looks at the incoming startDate from the widget, sets the incoming minutes to the next 15 minute increment, then adds 20 minutes to the startDate and stores that into the end date/time.  This is actually being stored in the two local variables, but for when the date/time is selected for the start, the actual time selected on the widget (not the modified date/time is being displayed.  So, what is displayed on the widget does not equal the actual value the widget is attached to.

To demo: when I start off:

I click on the start date/time input widget and set the minutes to 5 and then click off of the calendar on the page to close the date picker.  What this should do is take in the time that they have selected, see that the minutes is not on a 15 minute increment, so change the minutes to be 15, save that into the start time variable, and then add 20 minutes to that and save it to the end time variable.

So, the result of the above is that the start and end variables do get set correctly, the end input widget does update with the new date/time, BUT the input time widget has the value that was entered on the date picker – not the variable that I actually want it to have as modified in the onSelect action.  This is the problem.

Hi Jason,

Sorry!, I couldn't able to trace the reason/fix for the reported issue but you can do a workaround to achieve the mentioned use-case.

Implementation Steps:

• Define a JS node, within the DatePicker widget OnSelect handler action flow
• Define 2 input parameters to the JS node i.e.  1. InputElementId 2. DateTimeValue
• Define the below mentioned JS script in the node and pass the respective input parameter value to the JS node

setTimeout(function() {
    var inputEle = document.querySelector('#' + $parameters.InputElementId);
    inputEle.value = $parameters.DateTimeValue;
}, 10);

See this sample app | Fix - DateTimePicker (implemented time Logic is not fully correct, just for demo)

Hope this helps you!

Kind regards,

Benjith Sam

Benjith, so I guess I thought about it while sleeping last night - I went into the "OnSelect" action and on the branch for not picking a range, I just disabled the javascript "SetFieldValue" and it works like I want it to now!  Namely, the input widget value is being set by my own handler for "OnSelect" of the calendar picker widget.