Fire events in the destiny input field of a Calendar Widget

Fire events in the destiny input field of a Calendar Widget

Hi guys,

I have an input field that receives a date from a calendar widget.

I need to fire the onchange event on the input field when it changes but after I change the date using the widget it don't fires the event. Not even when I click on another field.

Do you have a workaround for this?
Pedro Alcântara
Hi Pedro,

You might want to try to use the onblur javascript event that fires when the input loses the focus.

Tiago Simões
Thanks for your sugestion but I already had tried and it doesn't work also.

You see, the problem I think is because the input field is disable to force the user to use the calendar widget and prevent invalid dates.

I took a look at the javascript code in the calendar widget (but I'm not very good at it), and I noticed a parameter 'onClose'. I already tried to change the widget adding a new parameter but I failed completely.
Hi Pedro,

According to the documentation in you should use the parameter onUpdate:

parameter name: onUpdate
type: function
description: If you supply a function handler here, it will be called right after the target field is updated with a new date. You can use this to chain 2 calendars, for instance to setup a default date in the second just after a date was selected in the first.
default value: null

You could change the Web Block to add this parameter. I haven't tested but it should work like this:

1 - Open the the Calendar Widget oml
2 - Open the Calendar Web Block
3 - Add a new Text Parameter to the Web Block (name it OnUpdate). Set Is Mandatory to No and default value to "null" (actual string)
3 - Edit the expression that creates the javascript Calendar object (it reads <javascript> and includes a call to Calendar.setup)
4 - In this expression add the following line:

electric : " + ToLower(BooleanToText (not UpdateOnCloseOnly)) + ",
onUpdate : " + OnUpdate + ",
cache : " + ToLower(BooleanToText (ReuseCalendarObject)) + "

5 - Redeploy

Next you should define a javascript function in the Web Screen that will include the Web Block:

function my_event_handler(cal) {

And pass my_event_handler as the value to the OnUpdate Parameter in the Calendar Web Block.

I hope this helps and works as described. I'm sorry I didn't have the time to actually test this solution.

Best regards,

Hi Paulo,

Thank you very much but It still don't work when the date changes.

I've done what you told on the calendar widget. Then I made a simple function just to give an alert. It gives the alert when entering in the page but it doesn't give it when I change the date.

I've done another test passing the following parameter in OnUpdate

"my_event_handler('" + btValidate.Id + "' )"

and with the following function:

function my_event_handler(p) {


but it gives me the error: 'document.getElementById(...)' is null or not an object

At the moment I did the workaround to put a visible button on the web screen to validate the stuff I want so I'm ok.

Nevertheless it was a good thing to have in the calendar widget when someone have time to implement it.

Thank you all for your help

Best regards
Pedro Alcântara

I have the same problem but... someone already made the change?
I already solve the problem with the onUpdade property.
I've seen the calendar widget is updated and has no an onUpdate parameter.

Can anybody tell me how to use this to get the value selected and update another date input field (also a widget attached to it)

i've tried something like this but no luck  "onUpdate : function(){ osjs('" + test2.Id + "').text( osjs('" +  test1.Id + "').val() ) ;}," 
I believe I found a little problem with the calendar Widget (at least on version, I don't know about other versions).
The onUpdate property had a misleading description, had to peek into the widget code to figure it out.

The description says:
"The function that is called after the date is updated in the Input widget. Receives a reference to the calendar."
So I assumed I had to pass either a function reference or the code to be executed.

Looking at the widget code we have,  If(OnUpdate<>"","onUpdate : function(){osjs('#" + InputWidgetId + "').blur();}," ,"")

Looking at this, it doesn't really matter what we pass the parameter, it just needs to have something, and it will implement the onUpdate as onBlur.

1. Fill in the property with something

2. Implement the onBlur on the text box.

It would make a lot more sense if it worked as the description states, until (if not already) fixed, this is the way to do it without editing RichWidgets. :)

(Sorry for bumping such an old thread :))
I agree, long time ago I stumbled on the same issue but somehow I forgot about it
Even better would be just to remove the property altogether and just internally implement osjs('#"+InputWidgetId+"').change(); allowing us to use the IDE's OnChange feature. :o
Hi António,

Actually the calendar does trigger the the platform OnChange of the target input.
What Joop wanted was to update a second input.

(The initial post itself is pretty old, I'm sure it works out-of-the-box now)

João Rosado
Hi João.
I just tested what you said, you're right. The onChange event seems to be triggered by the calendar... except for that one screen where I tried it today... It's not working in that specific situation, so I had to resort to onBlur and consequently found out about the OnUpdate misleading description thinguie. :D
Thanks for the feedback :)

Oh didn't notice that you said the platform version.
Then was probably this problem (also had a similar problem when using the flat style)\Input_Calendar-and-an-button-to-activate-it%2C-doesn%27t-fire-OnChange

That one was fixed in (and also on a recent 7.0 revision)

What exactly was the pattern in your screen, something like the described on that topic?

João Rosado
Yep, exactly. Seems someone else had the same problem before. This was the first thread that matched my search, that's why I bumped it. haha.

In that specific scenario I wanted a Link to open the calendar. (The textbox is hidden)
So I setup a link that would .click() on the textbox element to open the calendar bound to that textbox. Works fine, but in the end the OnChange isn't triggered. Onblur is triggered tho.

Attached is an example eSpace with both methods. :)
I am using, and I had to use the "onBlur" workaround described by Antonio as well. I spent hours trying to make "onchange" work with jQuery attaching to "change()" of the input box.

Yuck, never mind... I spoke too soon. That actually make problems worse, it seems to have totally stopped the actual calendar from firing the "onchange" that I set in the IDE.

Pretty old thread here :)
The problem I fixed there was caused because the onchange of the platform was only triggered if the input had focus, so the calendar widget in Richwidgets was changed to focus the input before changing the value.

It will probably have the same problems with other calendar javascript based widgets. (or any other javascript based widgets that change input values)

Just checked the change logs and you are a bit unlucky Justin. The issue I mentioned was fixed on version of the Richwidgets. Why you still on

João Rosado
Joao -

Whoops, we're on!

Here's what I'm struggling with:

I have an input widget with an OnChange event in OutSystems, and it has an Input_Calendar control tied to it. I need to trigger some JavaScript when a date is picked. When I use the Extended Properties to add an "OnChange" to the field, it breaks the actual OutSystems "OnChange" handler (no surprise). When I user jQuery to the code to the .change() of the input widget, it works fine for someone typing in that field, but not when the daes are selected through the Input_Calendar (expected because the calendar's JavaScript won't trigger an onChange event). I tried adding dummy text to the "OnUpdate" on the Input_Calendar and an onblur handler to th einput widget in Extended Properties, and that made a mess of things.

So the question is: how do you run JavaScript when a date is selected in the Input_Calendar?