Introduzione
Volete limitare gli anni visualizzati nel campo del modulo Date Picker? In questo tutorial, faremo in modo che il Date Picker limiti l'anno a qualsiasi cosa che abbia almeno 18 anni. Utilizzando PHP è possibile ottenere facilmente questo risultato e vi guideremo attraverso ogni passo.
Creazione del modulo
Per iniziare, creeremo un nuovo modulo e aggiungeremo i nostri campi, tra cui un campo Data.
Una volta aggiunto il campo del modulo Data, fare clic sulla scheda Avanzate e dal menu a tendina selezionare Scegli data come tipo di data.
Se avete bisogno di aiuto per creare il vostro modulo, potete consultare questa documentazione.
Impostazione
Successivamente, dovrete copiare questo snippet nel vostro sito.
Se avete bisogno di aiuto per aggiungere gli snippet al vostro sito, consultate questo tutorial.
/**
* Limit years in date picker
*
* @link https://wpforms.com/developers/how-to-limit-the-years-inside-your-date-picker/
*/
function wpf_dev_limit_date_picker_years() {
?>
<script type="text/javascript">
var d = new Date();
window.wpforms_datepicker = {
disableMobile: true,
// Don't allow users to pick years less than 18 years
maxDate: d.setDate( d.getDate() - 6574 ),
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker_years', 10 );
Con questo snippet, forziamo il Date Picker a visualizzare solo la data di nascita di chi ha almeno 18 anni.
E questo è quanto! Ora avete limitato gli anni disponibili nel vostro selezionatore di date. Volete anche consentire un intervallo di date nel vostro selezionatore di date? Consultate il nostro tutorial su Come consentire un intervallo di date o più date nel selezionatore di date.
Correlato
Riferimento azione: wpforms_wp_footer_end
FAQ
D: Posso applicarlo anche al menu a tendina della data?
A: Per ottenere questo risultato si può facilmente utilizzare un altro snippet. Basta seguire questo tutorial e cambiare l'intervallo di anni $args['years'] = range( 2019, 2020 ); per inserire l'intervallo di anni desiderato.
D: Come posso indirizzare un singolo modulo?
R: Assolutamente sì, per indirizzare un singolo modulo, utilizzare questo snippet. Ricordatevi solo di cambiare l'ID del modulo e del campo. Questo snippet utilizza window.wpforms_1279_1, che è l'ID del modulo 1279 e l'ID del campo 1. È necessario aggiornare questi ID per farli corrispondere ai propri.
Se avete bisogno di aiuto per trovare questi numeri ID, consultate questa esercitazione.
/**
* Limit years in date picker for a specific form
*
* @link https://wpforms.com/developers/how-to-limit-the-years-inside-your-date-picker/
*/
function wpf_dev_limit_date_picker_years() {
?>
<script type="text/javascript">
var d = new Date();
window.wpforms_1279_1 = window.wpforms_1279_1 || {};
window.wpforms_1279_1.datepicker = {
disableMobile: true,
// Don't allow users to pick years less than 18 years
maxDate: d.setDate( d.getDate() - 6574 ),
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker_years', 10 );