DatePicker - Trap Month Change Event

Hi, We are wanting to use the DatePicker in our mobile app (OutSystems UI). We've looked at some other controls but they don't look as nice hence trying to work with DatePicker. We want to be able to trigger an event on screen when the user changes the month.

The problem that we have is that the DatePicker doesn't raise any event when the month changes, only when a specific date is tapped on. I tried cloning the DatePicker and changing it, but it would involve a lot of JavaScript which i'm not familiar with so seems too complex for me to do. I also tried adding a click event handler onto the previous/next buttons with the .pika-prev/.pika-next class attributes using AddEventListener on the buttons (right on the edge of my Java skill set), but didn't manage to get that to work (maybe the Pikaday library is clearing the event?)

Has anyone got any JavaScript that I can add to my app that will trigger an event back to the UI when the next or previous buttons (month change) are clicked in the DatePicker please? 

Hi Richard,

After a long JS technical battle (hits and trials), finally I got succeeded in achieving your requirement :)

See the sample application in browser

To check the implementation in native device Use --> PWA Link

Steps:

1) Add a Screen OnReady Event Handler

2) Within the OnReady Event Handler action flow introduce an JS node/action flow element

3) Define the below mentioned JavaScript within the JS node

JavaScript Code Snippet

$(document).on('touchstart','.pika-prev, .pika-next', function () {
    $actions.ShowMonthMsg(); // calling screen action
});

Let me know if you need .oml solution file

Hope this helps you!


Regards,

Benjith Sam

Thanks Benjith, Thanks for your help with this. I also want to use this in my Reactive Web app. Is there a different event I can use instead of 'touchstart' in the web? 

Richard Falkner wrote:

Thanks Benjith, Thanks for your help with this. I also want to use this in my Reactive Web app. Is there a different event I can use instead of 'touchstart' in the web? 

Hi Richard,

To implement the same in the Reactive Web Application the mentioned steps in the previous post will remain the same, you will just have to include a small change in the JavaScript code 

i.e change the event from touchstart to mousedown that's it :)


JavaScript Code Snippet

$(document).on('mousedown','.pika-prev, .pika-next', function () {
    $actions.ShowMonthMsg(); // calling screen action
});


See this sample app

Hope this helps you!


Regards,

Benjith Sam

Hi Richard,

You got it solved for Reactive Web?


Regards,

Benjith Sam