In Pardot

How to Create a Better Date Picker Within Pardot Forms

2 Mins Read

Want to be able to restrict the date range of a date picker within your Pardot forms? The default date picker with Pardot does not provide this option, but with a couple of lines of JavaScript, you can enhance the functionality of the date picker. In this tutorial, I’ll show you how to use the jQuery UI date picker within your Pardot form.

Step 1: Add the field to your form

Add the field to your form. Since we won’t be using the default date picker leave the type as TEXT.

Step 2: Add the JavaScipt to your form

In the form editor, go to step #3 – look & feel and click on the below form section. Copy & paste this JavaScript in the HTML editor.


Step 3: Edit the script

There are a couple of changes you need to make to the script in order for it to work with your form:

  1. Update YOURDATEFIELDNAME with the name of your Pardot field that should launch the date picker.
  2. Update minDate with the number of days in the past the user should be able to see and select. For example “0” would not show any dates in the past. “-20” would allow the user to select up to 20 days in the past.
  3. Update maxDate with the number of days in the future the user should be able to select. For example, “+1M” would allow the user to select a date that is 1 month in the future.

Step 4:

Save and test! Your date picker should look like the one below and if you fill out the form the date should populate within Pardot in the yyyy-mm-dd format.

Questions?

Send me a tweet @jennamolby, leave a comment below, or book a Peer Chat.

Author

I'm a Freelance Marketing Operations Consultant With 15 years of experience in Marketing Operations, I’ve worked with a wide range of tools including Salesforce, Marketing Cloud Account Engagement (Pardot), Marketo, and many other sales and marketing platforms. I help teams optimize their tech stacks, improve processes, and get accurate, actionable reporting. Whether it’s setting up your Marketing Automation Platform, building Salesforce reports, managing lead lifecycles, tracking attribution, or integrating your tech stack, I ensure everything is aligned to drive real results.

19 Comments

  1. Julie Reply

    Hi there- is there a way to add in a date and time code so the date can be selected along with a preferred time?
    Thanks!

    • Jenna Molby Post Author

      Hi Julie, No the jQuery UI date picker does not allow for the time to be selected.

  2. Alex Bradley Reply

    I am using date picker for a date of birth field. Currently opening the date picker allows a user to go forward or backward only 10 years. All of my form submissions will require going back further than that. Is it possible to turn the date field into a set of 3 dropdown options for Month, Day, and Year? Alternatively, is it at least possible for the date picker to show years back further than just the 10 that display by default?

    • Jenna Molby Post Author

      Hi Alex, Yes, you can set the number of years you want to display. Like this

      $( “p.YOURDATEFIELDNAME input” ).datepicker({
      // Update minDate with how far back the date picker should go
      minDate: 0,
      // Update maxDate with how far in the future the date picker should go
      maxDate: “+1M”,
      // This formats the date so it’s valid within Salesforce/Pardot
      dateFormat: “yy-mm-dd”
      // Add year range
      yearRange: “2002:2012”
      });.

      Here’s the Doc which contains more info https://api.jqueryui.com/datepicker/#option-yearRange.

  3. Joe Reply

    Hey Jenna, this is awesome, keep up the great work. I am having some issues though —

    When setting the field type to “Text” in the form’s “Fields” settings, the calendar picker no longer displays.
    It does display when i set the field type to “Date”

    However, the calendar displayed shows all of the dates in white, so it’s really hard to read. Is that related to the Layout Template?

    • Jenna Molby Post Author

      Hi Joe, thanks so much! The field type should be TEXT. Setting the field type to DATE will display the Pardot date picker and not the date picker that is added via Javascript. You might have an error within the JS that is preventing it from working. Send me a link to your form and I can take a look.

  4. Partha Dave Reply

    Hi, this doesnt seem to work for me, i think there may be some conflict with what the pardot field name is, is this is the label of the field or the prospect field name?

    • Jenna Molby Post Author

      Hi Partha, It’s the prospect field name. If you are still having issues you can send me the link to your landing page to [email protected] and I can confirm that the name is correct. Cheers, Jenna

  5. Jon McMinn Reply

    Love this solution, Jenna! Is it possible to restrict the days available (for instance, prevent someone from selecting a weekend day)?

    • Jenna Molby Post Author

      Thank you :). The easiest way to not allow someone from selected a weekend day is to hide the weekends using CSS, like this: th.ui-datepicker-week-end,
      td.ui-datepicker-week-end {
      display: none;
      }. Cheers, Jenna

Write A Comment