Souhaitez-vous personnaliser le champ Date Picker pour permettre la sélection d'une plage de dates ou de plusieurs dates à l'intérieur de votre formulaire ? Lorsque vous autorisez plusieurs réservations dans un même formulaire, vous pouvez 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 allons vous montrer comment utiliser PHP pour fournir une plage de dates ou des sélections de dates multiples pour vos WPForms.
Note : Lorsque vous utilisez des snippets pour le sélecteur de date, il est préférable de désactiver toutes les fonctionnalités intégrées que WPForms fournit dans le constructeur de formulaire pour restreindre davantage les dates. Pour plus d'informations, veuillez consulter cette documentation.
Création du formulaire
Tout d'abord, vous devez créer votre formulaire et ajouter au moins un champ de formulaire Date/Heure et définir le champ comme étant un sélecteur de date.
Si vous avez besoin d'aide pour créer un formulaire, veuillez consulter cette documentation.
Permettre une plage de dates ou des dates multiples
Une fois le formulaire créé, choisissez si vous souhaitez autoriser une plage de dates ou si vous souhaitez autoriser la sélection de plusieurs dates dans votre formulaire et ajoutez cet extrait à votre site.
Si vous avez besoin d'aide pour ajouter des snippets à votre site, consultez ce tutoriel.
Note : Veuillez noter que si vous modifiez ces entrées, l'écran d'entrée ne prend pas en charge les plages de dates ou les dates multiples. Ce snippet n'est destiné qu'aux utilisateurs frontaux de vos formulaires.
Plage de dates
Ce snippet 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 );
Les dates de début et de fin seront notées dans l'entrée de la soumission.
Dates multiples
Vous pouvez également utiliser ce snippet qui permet de sélectionner plusieurs dates pour chaque sélecteur de date sur 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, il se peut que ces formats de date ne soient pas acceptés par ces services. Veillez à tester toute personnalisation avant de l'utiliser sur un formulaire réel.
Et c'est tout ! Vous êtes maintenant en mesure de sélectionner une plage de dates ou plusieurs dates dans vos WPForms. Vous souhaitez créer plus d'options pour votre champ Date? Essayez l'article sur Comment créer des formats supplémentaires pour le champ Date.
Référence Action
FAQ
Q : Comment cibler un seul formulaire ou un seul sélecteur de date à l'intérieur d'un formulaire spécifique ?
R : Pour cibler un formulaire spécifique pour la plage de dates, par exemple, vous devez utiliser l'extrait suivant.
/**
* 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 à l'intérieur de window.wpforms_1049 est l'ID du formulaire.
Si vous avez plusieurs sélecteurs de date dans un formulaire spécifique, vous pouvez cibler un ID de champ spécifique dans 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 );
Comme dans le premier exemple, nous ciblons le formulaire ID 1049, mais dans cet exemple, nous ne ciblons que le sélecteur de date dont le champ ID est 11.
Si vous avez besoin d'aide pour trouver l'identifiant de votre formulaire et de votre champ, veuillez consulter ce tutoriel.
Q : Le formulaire peut-il utiliser la plage de dates tout en limitant les dates ?
R : Absolument ! Vous pouvez utiliser la plage de dates, ne pas autoriser les dates passées et n'autoriser qu'un certain nombre de jours à choisir à l'avance. Dans l'extrait de code ci-dessous, nous ciblons le formulaire ID 1049 et le sélecteur de date du formulaire :
- Ne pas autoriser la sélection de dates antérieures
- Utiliser la fonctionnalité de plage de dates
- Ne permettre qu'un maximum de 14 jours de sélection
/**
* 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'identifiant de votre formulaire et de votre champ, veuillez consulter ce tutoriel.
Q : Puis-je modifier le séparateur de 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 code ci-dessus.
/**
* 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 modifier rangeSeparator : 'sep-text-goes-here' pour qu'il corresponde à ce que vous voulez comme séparateur. Par défaut, vous verrez un tiret (-) comme séparateur.
Q : Puis-je exiger qu'un nombre minimum de jours soit sélectionné ?
R : Absolument, pour utiliser l'intervalle et exiger un nombre minimum de jours, il suffit d'utiliser 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 en utilisant des classes CSS au lieu d'objets de fenêtre ?
R : Oui, vous pouvez cibler les sélecteurs de date en utilisant des classes CSS plutôt que des objets de fenêtre. Cette approche offre une plus grande souplesse dans le ciblage d'éléments spécifiques sans nécessiter de personnalisation importante.
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 avec la classe CSS que vous utilisez pour vos champs de sélection de date.