Het aanpassen van de datepicker (datumprikker) van Gravity Forms is eenvoudig. In deze korte blog een antwoord op de vraag hoe je alleen toekomstige data laat zien in de datepicker.
Het is geen geheim dat Gravity Forms mijn favoriete plugin is voor het maken van formulieren. Robuust, geweldige support en makkelijk aan te passen naar de wensen van jou en je klanten. Juist door de mogelijkheid om de plugin zelf aan te passen maakt Gravity Forms populair.
Analyse
Voor een klant was het nodig om een datepicker veld op een formulier te zetten voor het maken van een afspraak. Een afspraak in het verleden is, nog, erg lastig, dus het zou fijn zijn als het invoerveld alleen toekomstige data accepteert. De datepicker is een jQueryUI widget en de documentatie van deze widget is hier te vinden. Dus dat was de eerste plek waar ik ging kijken. Na wat JavaScript code te hebben geschreven had ik het voor elkaar.
En nu verwacht je een stukje JavaScript code met uitleg. Helaas, want ik wilde graag weten of het niet ‘op de Gravity Forms’ manier kon. Waarom? Omdat dat gewoon de beste manier is zodat er niks breekt bij toekomstige updates.
Om te kijken of het op de Gravity Forms manier kan, is de eerste stap: in de code van Gravity Forms duiken. Ik ben gaan kijken in het ‘/js/datepicker.js’ bestand en kwam daar al snel een stukje code tegen:
// allow the user to override the datepicker options object
optionsObj = gform.applyFilters('gform_datepicker_options_pre_init', optionsObj, inputId[1], inputId[2]);
Met de gform_datepicker_options_pre_init filter is het dus mogelijk de datepicker aan te passen. In de documentatie van Gravity Forms staat een mooi document over deze filter.
De laatste aanpassing die we moeten doen is het readonly maken van het bijbehorende tekstveld van de datepicker. Vul hiervoor een class is bij je invoerveld, bijvoorbeeld ‘gf_readonly’. En met een extra JavaScript regel maken we van elke veld dat de class ‘gf_readonly’ heeft, een readonly veld.
Hiermee komen we dan tot de volgende functie, welke ik in een JS bestand heb gezet die met een wp_enqueue_script() geladen wordt.
De code
// disable past dates
gform.addFilter('gform_datepicker_options_pre_init', function (optionsObj, formId, fieldId) {
optionsObj.minDate = 0;
return optionsObj;
});