Introduction
Souhaitez-vous afficher l'âge d'un champ de sélection de date dans votre formulaire ? Dans ce guide concis, nous vous aiderons à créer un formulaire qui recueille la date de naissance à l'aide d'un champ de sélection de date. De plus, nous vous montrerons comment utiliser JavaScript pour calculer et afficher sans effort l'âge de la personne dans une autre section du formulaire. Poursuivons les instructions étape par étape !
Création du formulaire
Commençons par créer un nouveau formulaire et par ajouter nos champs. Veillez à inclure au moins un champ Date.
Si vous avez besoin d'aide pour créer votre formulaire, veuillez consulter cette documentation.
Ajout du champ HTML
Comme notre but ultime est de présenter l'âge une fois que la date d'anniversaire est sélectionnée, ajoutons une fonction HTML (champ). À l'intérieur de ce champ, nous intégrerons une barre HTML vide, à laquelle nous attribuerons la classe "âge". Ce span vide servira d'espace réservé, qui affichera l'âge de manière dynamique dès que le champ de sélection de date saisira la sélection de l'utilisateur.
<span class="age"></span>
Ajout du snippet
Il est maintenant temps d'ajouter l'extrait de page qui permettra d'assembler tous ces éléments. Si vous avez besoin d'aide pour savoir comment et où ajouter des snippets à votre site, consultez ce guide utile.
/**
* Calculate age based on date of birth date picker field
*
* @link https://wpforms.com/developers/how-to-display-the-age-from-a-date-picker-field/
*/
function wpf_dev_check_age() {
?>
<script>
jQuery(function($) {
// Update the 3535_9 to match the form and field ID
// of your form and date picker field
window.wpforms_3535_9 = window.wpforms_3535_9 || {};
window.wpforms_3535_9.datepicker = {
mode: "single",
onClose: function(selectedDates, dateStr, instance) {
// Set the today date as the current date
var today = new Date();
// Set the DOB as the selected date of birth from
// the date picker field
var DOB = selectedDates[0];
// Get the age by subtracting today's date from
// the selected date of birth
var age = today.getTime() - DOB.getTime();
// Add a string to the message that will appear
// showing the age
var message = 'Your age is ';
// Calculate the date from the age into "years old"
age = Math.floor(age / (1000 * 60 * 60 * 24 * 365.25));
// Assign the message and age into a variable
var totalMessage = message.concat(age);
// Display the message into the empty span of "age"
// inside the HTML field
jQuery('.age').text(totalMessage);
}
}
});
</script>
<?php
}
add_action( 'wpforms_wp_footer', 'wpf_dev_check_age', 10 );
Cet extrait contient de nombreux commentaires expliquant chaque étape. Mais il recherchera l'ID du formulaire 3535 et l'ID du champ Date de 9. Lorsque cette date sera sélectionnée et que la fenêtre contextuelle du sélecteur de date se fermera, il effectuera automatiquement le calcul à partir de la date saisie, moins la date actuelle, et formulera cette différence en années pour l'afficher dans notre travée HTML vide avec une classe d'âge.
Dans le cadre de cette documentation, l'ID de notre formulaire est 3535 et l'ID du champ Date est 9. Vous devrez mettre à jour ces ID dans l'extrait pour qu'ils correspondent à vos propres ID de formulaire et de champ. Si vous avez besoin d'aide pour trouver vos identifiants, consultez cette documentation.
C'est tout ce dont vous avez besoin pour calculer l'âge à partir d'un champ de sélection de date. Vous souhaitez également modifier la position de la fenêtre contextuelle de sélection de la date ? Jetez un coup d'œil au didacticiel intitulé Comment modifier la position de la fenêtre contextuelle du sélecteur de date.
Référence
Référence de l'action : wpforms_wp_footer