+- Form Tools (https://forums.formtools.org)
+-- Forum: Modules / Other (https://forums.formtools.org/forumdisplay.php?fid=8)
+--- Forum: Modules (https://forums.formtools.org/forumdisplay.php?fid=16)
+--- Thread: Custom Fields Module and Form Builder - Datepicker and minDate and maxDate (/showthread.php?tid=1932)
Custom Fields Module and Form Builder - Datepicker and minDate and maxDate - OnlyOneN - Mar 2nd, 2012
People of the Form Tools Forum,
I'm working on using the Form Builder and Custom Fields to replace my current process of manually creating my event registration forms.
One of the things I need to do is limit the dates that the user can choose in the datepicker. I've already duplicated the Date field type, and called mine Start End Date. I've added the settings "Min Date" and "Max Date" and have given them a unique identifier.
I've modified the class name in the "Displaying / Edit Field" and "Javascript" tabs. I *can* set the min / max dates by adding them to the default_settings on the javascript tab, however, I can't get the new settings to update the datepicker.
It appears that it's using the jQuery UI datepicker, so I tried adding this code to the Edit Field tab, right above the field itself (wrapped in script tags):
$( ".selector" ).datepicker( "option", "minDate", new Date(2007, 1 - 1, 1) );
I've tried setting the .selector to my field's ID, name, and unique class, with no luck.
Any pointers?
Thanks,
Glen
RE: Custom Fields Module and Form Builder - Datepicker and minDate and maxDate - Ben - Mar 3rd, 2012
Hi Glen,
Great problem. If I were to tackle this, I’d add two new settings to your new Date field type: “Min Date” and “Max Date”, where you could define the allowed dates. That way, you could re-use your new Date field type as many times as you need, with different permitted date ranges in each instance.
[N.B. Unfortunately, in terms of inputting that info, you can only provide a simple text box. So it would be up to you to enter a date in a specific format, to be pulled apart and used by the field type on page load, e.g. YYYY-MM-DD]
In terms of the JS you need, what you included in your post actually looks okay. Double check your selector, perhaps... do you maybe need to wrap it in a $(function() { … }); so it runs onload? Possibly not, but worth checking.
- Ben