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:
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 :)
$(document).on('mousedown','.pika-prev, .pika-next', function () { $actions.ShowMonthMsg(); // calling screen action });
See this sample app
Can you please share the oml. I am facing some issue.
Hi Jay,
Sorry for my late reply. Refer to the attached omls for both Mobile and Reactive web implementations.
I hope this helps you!
Kind regards,
Thanks @Benjith Sam
You got it solved for Reactive Web?