Résumé IA
Souhaitez-vous personnaliser le champ Sélecteur de date pour permettre la sélection d’une plage de dates ou de plusieurs dates dans votre formulaire ? Lorsque vous autorisez plusieurs réservations dans un seul formulaire, vous devrez peut-être donner à vos visiteurs la possibilité de sélectionner une plage de dates ou plusieurs dates. Par défaut, une seule date peut être sélectionnée dans ce calendrier.
Dans ce tutoriel, nous vous montrerons comment utiliser PHP pour fournir une plage de dates ou des sélections de plusieurs dates pour vos WPForms.
Remarque : Lorsque vous utilisez des extraits de code pour le Sélecteur de date, il est préférable de désactiver les fonctionnalités intégrées que WPForms fournit dans le générateur de formulaires pour restreindre davantage les dates. Pour plus d’informations, veuillez consulter cette documentation.
Création du formulaire
Vous devrez d’abord créer votre formulaire et ajouter au moins un champ de formulaire Date/Heure et définir le champ sur Sélecteur de date.
Si vous avez besoin d’aide pour créer un formulaire, veuillez consulter cette documentation.
Autoriser une plage de dates ou plusieurs dates
Une fois votre formulaire créé, choisissez si vous souhaitez autoriser une plage de dates ou plusieurs dates à être sélectionnées dans votre formulaire et ajoutez cet extrait de code à votre site.
Si vous avez besoin d’aide pour ajouter des extraits de code à votre site, veuillez consulter ce tutoriel.
Remarque : Veuillez noter que si vous modifiez ces entrées, l’écran des entrées ne prend pas en charge les plages de dates ou plusieurs dates. Cet extrait de code est uniquement destiné aux utilisateurs frontaux de vos formulaires.
Plage de dates
Cet extrait de code particulier permettra à tous les sélecteurs de date de sélectionner une plage de dates pour tous les formulaires.
/**
* Modify WPForms Date/Time field date picker to accept a range of dates.
*
* @link https://wpforms.com/developers/allow-date-range-or-multiple-dates-in-date-picker/
*/
function wpf_dev_date_picker_range() {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
mode: "range"
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_range', 10 );
Dans la soumission de l’entrée, les dates de début et de fin seront notées.
Plusieurs dates
Alternativement, vous pouvez utiliser cet extrait de code qui permettrait de sélectionner plusieurs dates pour chaque sélecteur de date de vos formulaires créés avec WPForms.
/**
* Modify WPForms Date/Time field date picker to accept multiple dates.
*
* @link https://wpforms.com/developers/allow-date-range-or-multiple-dates-in-date-picker/
*/
function wpf_dev_date_picker_multiple() {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
mode: "multiple"
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_multiple', 10 );
Dans l’entrée, toutes les dates sélectionnées seront séparées par une virgule.
Remarque : Si vous utilisez des intégrations tierces, ces formats de date peuvent ne pas être acceptés par ces services. Assurez-vous de tester toutes les personnalisations avant de les utiliser sur un formulaire en direct.
Et voilà ! Vous pouvez maintenant sélectionner une plage de dates ou plusieurs dates sur vos WPForms. Souhaitez-vous créer plus d’options pour votre champ Date ? Essayez l’article sur Comment créer des formats supplémentaires pour le champ Date.
Action de référence
FAQ
Q : Comment cibler un seul formulaire ou un seul sélecteur de date dans un formulaire spécifique ?
R : Pour cibler un formulaire spécifique pour la plage de dates, par exemple, vous utiliseriez cet extrait de code.
/**
* Modify WPForms Date/Time field date picker to accept a range of dates.
*
* @link https://wpforms.com/developers/allow-date-range-or-multiple-dates-in-date-picker/
*/
function wpf_dev_limit_date_picker() {
?>
<script type="text/javascript">
window.wpforms_1049 = window.wpforms_1049 || {};
window.wpforms_1049.datepicker = {
mode: "range",
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10 );
Alors que le 1049 dans window.wpforms_1049 est l’ID du formulaire.
Si vous avez plusieurs sélecteurs de date dans un formulaire spécifique, vous pourriez cibler un ID de champ spécifique avec cet exemple.
/**
* Modify WPForms Date/Time field date picker to accept a range of dates.
*
* @link https://wpforms.com/developers/allow-date-range-or-multiple-dates-in-date-picker/
*/
function wpf_dev_limit_date_picker() {
?>
<script type="text/javascript">
window.wpforms_1049_11 = window.wpforms_1049_11 || {};
window.wpforms_1049_11.datepicker = {
mode: "range",
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10 );
Tout comme avec le premier exemple, nous ciblons l’ID du formulaire 1049, cependant avec cet exemple, nous ciblons également uniquement le sélecteur de date avec l’ID de champ 11.
Si vous avez besoin d'aide pour trouver l'ID de votre formulaire et de votre champ, veuillez consulter ce tutoriel.
Voici un exemple utilisant des sélecteurs de classe jQuery :
R : Absolument ! Vous pouvez utiliser la plage de dates, ne pas autoriser les dates passées et autoriser uniquement un certain nombre de jours à sélectionner à l'avance. Dans l'extrait de code ci-dessous, nous ciblons l'ID de formulaire 1049 et le sélecteur de date du formulaire :
- Ne pas autoriser la sélection de dates passées
- Utiliser la fonctionnalité de plage de dates
- Autoriser seulement jusqu'à 14 jours à sélectionner
/**
* Modify WPForms Date/Time field date picker to accept a range of dates.
*
* @link https://wpforms.com/developers/allow-date-range-or-multiple-dates-in-date-picker/
*/
function wpf_dev_limit_date_picker() {
?>
<script type="text/javascript">
window.wpforms_1049 = window.wpforms_1049 || {};
window.wpforms_1049.datepicker = {
minDate: new Date(),
mode: "range",
maxDate: new Date().fp_incr(14)
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10 );
Si vous avez besoin d'aide pour trouver l'ID de votre formulaire et de votre champ, veuillez consulter ce tutoriel.
Q : Puis-je changer le séparateur pour la plage de dates ?
R : Absolument ! Pour utiliser un séparateur de date différent sur la plage de dates, utilisez cet extrait de code au lieu du précédent.
/**
* Modify WPForms Date/Time field date picker to accept a range of dates.
*
* @link https://wpforms.com/developers/allow-date-range-or-multiple-dates-in-date-picker/
*/
function wpf_dev_date_picker_range() {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
mode: "range",
locale: {
rangeSeparator: 'sep-text-goes-here'
}
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_range', 10 );
N'oubliez pas de changer rangeSeparator: ‘sep-text-goes-here’ pour qu'il corresponde à ce que vous souhaitez comme séparateur. Par défaut, vous verrez un tiret (-) comme séparateur.
Q : Puis-je exiger une plage minimale de jours à sélectionner ?
R : Absolument, pour utiliser la plage et exiger un nombre minimum de jours, utilisez simplement cet extrait de code.
/**
* Modify WPForms Date/Time field date picker to accept a range of dates.
*
* @link https://wpforms.com/developers/allow-date-range-or-multiple-dates-in-date-picker/
*/
function wpf_dev_date_picker_range() {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
mode: "range",
onClose: function(selectedDates, dateStr, instance) {
var daysInRange = document.getElementsByClassName('inRange');
var totalDays = daysInRange.length+2;
if(totalDays<=7) {
alert("Min 7 Days Required");
this.clear();
}
}
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_range', 10 );
Q : Puis-je cibler les sélecteurs de date à l'aide de classes CSS au lieu d'objets de fenêtre ?
R : Oui, vous pouvez cibler les sélecteurs de date à l'aide de classes CSS au lieu d'objets de fenêtre. Cette approche offre plus de flexibilité pour cibler des éléments spécifiques sans personnalisation approfondie.
Voici un exemple utilisant les sélecteurs de classe jQuery :
/**
* Modify WPForms Date/Time field date picker to accept a range of dates using jQuery.
*
* @link https://wpforms.com/developers/allow-date-range-or-multiple-dates-in-date-picker/
*/
function wpf_dev_limit_date_picker() {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
if (typeof flatpickr !== 'undefined') {
$('.travel-form-date-range').each(function() {
var inputField = $(this).find('input.flatpickr-input');
if (inputField.length) {
flatpickr(inputField[0], {
mode: "range",
disableMobile: true
});
}
});
}
});
</script>
<?php
}
add_action('wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10);
Dans cet exemple, nous ciblons les sélecteurs de date avec la classe CSS travel-form-date-range. Cette méthode vous permet d'appliquer la fonctionnalité de plage de dates à des sélecteurs de date spécifiques en fonction de leur classe, plutôt que d'utiliser les ID de formulaire ou de champ.
N'oubliez pas de remplacer travel-form-date-range par la classe CSS réelle que vous utilisez pour vos champs de sélection de date.
Puis-je afficher plusieurs mois à la fois dans le calendrier du sélecteur de date ?
Oui ! Vous pouvez afficher plus d'un mois à la fois en utilisant l'option showMonths de la bibliothèque Flatpickr. Ceci est utile si vous souhaitez que les utilisateurs voient plus de dates en un coup d'œil lors de la sélection d'une plage.
function wpf_dev_date_picker_range() {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
mode: "range",
showMonths: 2
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_range', 10 );
Dans l'exemple ci-dessus, le calendrier affichera 2 mois côte à côte lors de la sélection des dates. Vous pouvez changer showMonths à n'importe quel nombre en fonction du nombre de mois que vous souhaitez afficher.