Date picker range based on other field

By: Galen Bond | Asked: 08/19/2022
ForumsCategory: How-toDate picker range based on other field
Galen Bond asked 2 years ago
Hello, FF Support has mentioned I'm best to inquire here for any ideas on this one.. Id like to have a date picker in a form, but its default date (month) is based on a previously selected drop down. So the user selects the month from a drop down list, then the date picker defaults to that month.. and bonus points if we can limit the available dates in the picker to that month. (IE.. select September from the drop down, then click on the date pick further down and it defaults to September..and ideally only lets me choose dates in September). This would always choose the coming up month IE choose January today and January 2023 would default (because its in the future). Thinking if I could somehow make a (hidden?) date picker choose the first of the month based on the selected month in the drop down, then I could use that hidden date field to manipulate the available options in the date picker the user sees... just haven't wrapped my head around this.
1 Answers
Victor Font answered 2 years ago
Yes, this can be done, but how well do you know jQuery/JavaScript? The datepicker is a jQuery UI object. This means jQuery/Javascript date functions work with date objects. JavaScript has a function called setMonth(). You can learn details about the function here: https://www.w3schools.com/jsref/jsref_setmonth.asp To make this work with Formidable, you need to write some custom jQuery. You install the custom jQuery script in the After Fields section of the form's Customize HTML page. What your jQuery needs to do is monitor the dropdown field's onchange event. Every time it changes, you reset the date and that should be it. To reset the date, you tap into the datepicker's API. There's an example here: https://stackoverflow.com/questions/21345194/how-do-i-programmatically-change-the-selected-month-in-jquery-datepicker Toy can learn more about the datepicker setdate function here: https://api.jqueryui.com/datepicker/#method-setDate When all is said and done, you'll probably only have about 8 lines of code to write. Hope this helps.

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crossarrow-right