Hi,


I'm trying to implement this jquery date picker, as I want to show years by default when it opens | https://www.jqueryscript.net/time-clock/Year-Picker-Text-Input.html

So I created a web block attached CSS and script in Javascript and added class to the input, but not getting it right still, I attached the OML and I'm sure there's something is wrong, can anyone explain to me how to actually achieve it right?

Hello. From what I see all you are missing is importing jquery library.
You can do so like you did for the other script you have on the weblock or by url. Just remember to put the jquery before the other script.

You can get the jquery on this link: https://code.jquery.com/jquery-3.3.1.slim.min.js


Feel free to tell me if you were able to achieve your objective.

Edit: Just to add a picture of the differences I made to make it work (This is on the web block's javascript)

Hi Abeer,

I have updated your oml and its working as you want.

You mis one jquery plugin in this.


Regards

Rahul Sahu

@Tiago,

Jquery is loaded (by OutSystems by default for traditional web) see 

You can also test that in the browser DevTools.

@abeer,

The Yearpicker library seems to load good, your code too, somehow it doesn't work. I spent some time on it, but could not get it working. Maybe I have some time tomorrow evening to continue.

Regards,

Daniel

Solution

Hi Abeer,

In addition to the previous replies, I created a sample app using the shared JQuery files...

See the sample app

Please find the attached .oml file

Point to Note:

1) Included the Supportive JS files to Data Tab > Resource > YearPicker

2) Observe the inclusion of supportive JS file using <script> tag within the expression widget (escape content = No) defined in the YearPicker Screen footer placeholder section

3) Added the CSS class definition and declarations (i.e. referred from yearpicker.css file) in the YearPicker Screen CSS Style Sheet section


Hope this helps you!


Regards,

Benjith Sam

Solution

Nice job Benjith !

Daniël Kuhlmann wrote:

Nice job Benjith !

Thank you Daniel for the words of appreciation :)


Regards, 

Benjith Sam

Rahul Sahu wrote:

Hi Abeer,

I have updated your oml and its working as you want.

You mis one jquery plugin in this.


Regards

Rahul Sahu


Hello Rahul, thanks so much for your reply it seems to work, but please can you explain more how exactly did you added it, as nothing in the resource and can't quite know the difference between our versions? appreciate your help.

Benjith Sam wrote:

Hi Abeer,

In addition to the previous replies, I created a sample app using the shared JQuery files...

See the sample app

Please find the attached .oml file

Point to Note:

1) Included the Supportive JS files to Data Tab > Resource > YearPicker

2) Observe the inclusion of supportive JS file using <script> tag within the expression widget (escape content = No) defined in the YearPicker Screen footer placeholder section

3) Added the CSS class definition and declarations (i.e. referred from yearpicker.css file) in the YearPicker Screen CSS Style Sheet section


Hope this helps you!


Regards,

Benjith Sam

Hello Benjith, thanks so much for your time, I got what was missing now, I should've added the library in the resource and include it in the script, appreciate your support, the detailed steps are very clear!


Tiago Oliveira wrote:

Hello. From what I see all you are missing is importing jquery library.
You can do so like you did for the other script you have on the weblock or by url. Just remember to put the jquery before the other script.

You can get the jquery on this link: https://code.jquery.com/jquery-3.3.1.slim.min.js


Feel free to tell me if you were able to achieve your objective.

Edit: Just to add a picture of the differences I made to make it work (This is on the web block's javascript)

I think what you meant is how Benjith comment it, thanks for your reply.


Abeer ElAssal wrote:

Hello Benjith, thanks so much for your time, I got what was missing now, I should've added the library in the resource and include it in the script, appreciate your support, the detailed steps are very clear!

You are welcome, Abeer :)

Glad I could be of help :)


Regards,

Benjith Sam