Comment limiter les années dans votre sélecteur de date

Introduction

Souhaitez-vous limiter les années affichées dans votre champ de formulaire Sélecteur de date ? Dans ce tutoriel, nous allons faire en sorte que le Sélecteur de date limite l'année à 18 ans ou plus. En utilisant PHP, vous pouvez facilement y parvenir et nous vous guiderons à chaque étape.

Création du formulaire

Pour commencer, nous allons créer un nouveau formulaire et ajouter nos champs, qui comprendront un champ Date.

Une fois que vous avez ajouté le champ de formulaire Date, cliquez sur l'onglet Avancé et, dans le menu déroulant, sélectionnez Sélecteur de date comme Type de date.

Configuration

Ensuite, vous devrez copier cet extrait de code sur votre site.

Si vous avez besoin d’aide pour ajouter des extraits de code à votre site, veuillez consulter ce tutoriel.

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

Avec cet extrait de code, nous forçons le Sélecteur de date à n'afficher que la date de naissance de toute personne âgée de 18 ans ou plus.

Et voilà ! Vous avez maintenant limité les années disponibles dans votre sélecteur de date. Souhaitez-vous également autoriser une plage de dates dans votre sélecteur de date ? Consultez notre tutoriel sur Comment autoriser une plage de dates ou plusieurs dates dans le sélecteur de date.

Articles associés

Référence d’action : wpforms_wp_footer_end

FAQ

Q : Puis-je également appliquer cela au menu déroulant de date ?

R : Vous pouvez facilement utiliser un extrait de code différent pour y parvenir. Suivez simplement ce tutoriel et modifiez la plage d'années $args['years'] = range( 2019, 2020 ); pour entrer la plage d'années que vous souhaitez.

Q : Comment puis-je cibler un seul formulaire ?

R : Absolument, pour cibler un seul formulaire, utilisez cet extrait de code. N'oubliez pas de modifier l'ID du formulaire et du champ. Cet extrait de code utilise window.wpforms_1279_1, qui correspond à l'ID du formulaire 1279 et à l'ID du champ 1. Vous devrez mettre à jour ces ID pour qu'ils correspondent aux vôtres.

Si vous avez besoin d'aide pour trouver ces numéros d'ID, veuillez consulter ce tutoriel.

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