Adding jQuery Datepicker to Marketo Form?

Anonymous
Not applicable

Adding jQuery Datepicker to Marketo Form?

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("http://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

Re: Adding jQuery Datepicker to Marketo Form?

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

Re: Adding jQuery Datepicker to Marketo Form?

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

Re: Adding jQuery Datepicker to Marketo Form?

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

Re: Adding jQuery Datepicker to Marketo Form?

I posted a demo of working code.