Adding jQuery Datepicker to Marketo Form?

Anonymous
Not applicable

Has anyone had success loading the jQuery Datepicker into a Marketo form field?

https://jqueryui.com/datepicker/#min-max

Because the form dynamically populates, the Datepicker script doesn't work. I want to use this script so I can set the selectable calendar dates 72 hours in the future. Unless that capability is available in Marketo somewhere.

My script:

<link rel="stylesheet" href="https://nation.marketo.com//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="//code.jquery.com/jquery-1.12.4.js"></script>

<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

And then within my form call...

<script>MktoForms2.loadForm("app-sj02.marketo.com", "APPID", FORMID,

    function(form){

    $( function() {

    $( "#Lead_Source_Notes__c" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });

  } );

.... rest of form code

I want the datepicker to apply to the Lead Source Notes field and it doesn't. Also tried it without the $( function() { in front of the datepicker form call and nada either.

It DOES work on a text field outside of the Marketo form if I do this:

<script>

  $( function() {

    $( "#Lead_Source_Notes__c" ).datepicker({ minDate: +3, maxDate: "+1M" });

  } );

  </script>

<p>Date: <input type="text" id="Lead_Source_Notes__c"></p>

So it's because Marketo is loading the form dynamically.

Any help?

4 REPLIES 4
SanfordWhiteman
Level 10 - Community Moderator

Always use the Marketo Forms events model exclusively; never wrap functions in unnecessary or improper DOM events (i.e. jQuery ready is a wrapper over DOMContentLoaded).

http://codepen.io/figureone/debug/ecc5b0670d1fd3e9b307afac6fc8c8c9

The Date Hired field is using the jQuery picker.

Anonymous
Not applicable

Thanks! I had originally had it like that and it wasn't working. I figured out what the issue was... I was linking to jquery_latest in addition to the versioned JS and it was glitching.

THANKS!

Anonymous
Not applicable

Hi Jen,

Could you please share the correct and working code?

Step by step instructions would be greatly appreciated!

Thanks,

Pete

SanfordWhiteman
Level 10 - Community Moderator

I posted a demo of working code.