Adding jQuery Datepicker to Marketo Form? | Community
Skip to main content
January 17, 2017
Question

Adding jQuery Datepicker to Marketo Form?

  • January 17, 2017
  • 1 reply
  • 2266 views

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

SanfordWhiteman
Level 10
January 18, 2017

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.

January 18, 2017

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!

February 9, 2017

Hi Jen,

Could you please share the correct and working code?

Step by step instructions would be greatly appreciated!

Thanks,

Pete