Restricting Date Field Value Ranges on Forms

[Anonymous]

Is it possible via Forms 2.0 to restrict the field value ranges on the form?

I don't want potential leads to select weekends and specific dates such as today. I would like them to book a meeting at least a week out. Thanks!

All the best,
Andrew

[SanfordWhiteman · Accepted solution]

Without knowing it, you're actually asking two different questions, because Marketo uses two different ways of rendering Date fields. 

In Chrome, which supports input type=date, it's actually pretty easy to manipulate min/max date and other stuff.  I just put together an example here where the date has to be a week out.

In every other browser, though, you would have to use custom onValidate code. Alternately, you could think about wrapping the Marketo input in a third-party date-picker component.  This would require some restyling/destyling with CSS but I can't see offhand why you couldn't get it to work.  Luckily a Marketo form is an HTML <FORM> under the hood.

[Anonymous]

Hello Sanford,

Thanks for the excellent response! Would you mind providing an example of the custom onValidate code and how to make the code dynamic per each browser? 

-Andrew

[SanfordWhiteman]

I wouldn't write your own onValidate code -- you'll just end up reinventing the datepicker!

Instead use a third-party datepicker widget, making sure it does what you need (weekends, dateranges, etc.).  Set the input to just text and the datepicker handles all the validation.  Here's an example using the Kalendae widget (one of hundreds, maybe thousands of widgets out there, but one I love) on a Marketo form: https://codepen.io/figureone/pen/abOovRO 

[Anonymous]

One last question. Since the datepicker is a third-party solution, how are you able to push its values to a Marketo custom field? Essentially, I want to token the values, so I can use them in an alert to our sales reps. I feel like I'm going to owe you a drink after this one:)