Come limitare gli anni all'interno del tuo selettore di date

Introduzione

Desideri limitare gli anni visualizzati nel tuo campo modulo Date Picker? In questo tutorial, limiteremo il Date Picker all'età di 18 anni o superiore. Utilizzando PHP puoi ottenerlo facilmente e ti guideremo passo dopo passo.

Creazione del modulo

Per iniziare, creeremo un nuovo modulo e aggiungeremo i nostri campi, che includeranno un campo Data.

Una volta aggiunto il modulo campo Data, fai clic sulla scheda Avanzate e dal menu a discesa seleziona Date Picker come Tipo di data.

Configurazione

Successivamente, dovrai copiare questo snippet sul tuo sito.

Se hai bisogno di aiuto su come aggiungere snippet al tuo sito, dai un'occhiata a 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, stiamo forzando il Date Picker a visualizzare solo la data di nascita di persone di 18 anni o più.

E questo è tutto! Ora hai limitato gli anni disponibili nel tuo date picker. Desideri anche consentire un intervallo di date nel tuo date picker? Dai un'occhiata al nostro tutorial su Come consentire intervalli di date o date multiple nel Date Picker.

Correlati

Riferimento Azione: wpforms_wp_footer_end

FAQ

D: Posso applicarlo anche al Date Dropdown?

R: Puoi facilmente usare uno snippet diverso per ottenere questo risultato. Segui semplicemente questo tutorial e modifica l'intervallo di anni $args['years'] = range( 2019, 2020 ); per inserire l'intervallo di anni che desideri.

D: Come posso indirizzare un singolo modulo?

R: Assolutamente, per indirizzare un singolo modulo, usa questo snippet. Ricorda 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. Dovrai aggiornare questi ID per farli corrispondere ai tuoi.

Se hai bisogno di aiuto per trovare questi numeri ID, consulta questo tutorial.

/**
 * 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 );