Introduction
Souhaitez-vous personnaliser le champ Date / Heure du sélecteur de temps dans WPForms ? Le sélecteur de temps fournit à l'utilisateur une liste de temps à choisir. Ces heures peuvent être modifiées de façon à ce que seule une plage horaire spécifique soit disponible. Vous pouvez également fournir une option intégrée dans le constructeur de formulaire pour limiter certaines heures.
Pour en savoir plus sur la mise en place d'une limite unique pour le sélecteur de temps, veuillez consulter cette documentation.
Dans ce tutoriel, nous allons vous montrer comment personnaliser le sélecteur de temps du champ Time pour qu'il soit désactivé plusieurs fois en utilisant un petit extrait de PHP.
Création du formulaire
Tout d'abord, nous allons créer un nouveau formulaire, ajouter nos champs et ajouter un champ de formulaire Temps.
Si vous avez besoin d'aide pour créer votre formulaire, veuillez consulter cette documentation.
Pour notre formulaire, nous allons utiliser les options de l'onglet Avancé pour limiter les heures d' ouverture et de fermeture de notre bureau à 8h-17h.
Ajout du snippet
Ensuite, nous voulons désactiver l'heure de 9h00 à 10h00 pour une réunion quotidienne de l'entreprise, mais nous voulons aussi désactiver le créneau horaire de 12h00 à 13h00 qui correspond à l'heure du déjeuner. Pour ce faire, nous devons ajouter un extrait à notre site.
Il y a trois façons différentes de l'appliquer :
- Tous les sélecteurs de temps à l'échelle du site
- Tous les sélecteurs de temps à l'intérieur d'un formulaire spécifique
- Un sélecteur de temps spécifique à l'intérieur d'un formulaire spécifique.
Choisissez l'extrait de code qui vous convient et copiez-le sur votre site.
Si vous avez besoin d'aide pour ajouter des snippets à votre site, veuillez consulter ce tutoriel .
Le sélecteur de temps peut être personnalisé davantage en utilisant les options disponibles dans la bibliothèque jQuery timepicker.
Tous les sélecteurs de temps à l'échelle du site
Les dispositions ci-dessous s'appliquent à tous les sélectionneurs de temps sur le site.
/**
* Limit the times available in the Date Time field time picker.
*
* @link https://wpforms.com/developers/customize-the-date-time-field-time-picker/
*/
function wpf_dev_limit_time_picker() {
?>
<script type="text/javascript">
window.wpforms_timepicker = {
// Disable lunch time and daily meeting time
disableTimeRanges: [
[ '9am', '10am' ],
[ '12pm', '1pm' ]
]
};
</script>
<?php
}
add_action( 'wpforms_wp_footer', 'wpf_dev_limit_time_picker', 30 );
Tous les sélecteurs de temps à l'intérieur d'un formulaire spécifique
Les dispositions ci-dessous s'appliquent à tous les sélecteurs de temps à l'intérieur du formulaire ID 879.
/**
* Limit the times available in the Date Time field time picker.
*
* @link https://wpforms.com/developers/customize-the-date-time-field-time-picker/
*/
function wpf_dev_limit_time_picker() {
?>
<script type="text/javascript">
// Change this _879 to match the form ID you have on your own form
window.wpforms_879 = window.wpforms_879 || {};
window.wpforms_879.timepicker = {
// Disable lunch time and daily meeting time
disableTimeRanges: [
[ '9am', '10am' ],
[ '12pm', '1pm' ]
]
};
</script>
<?php
}
add_action( 'wpforms_wp_footer', 'wpf_dev_limit_time_picker', 30 );
Un sélecteur de temps spécifique à l'intérieur d'un formulaire spécifique
Le texte ci-dessous s'applique au sélecteur de temps dans le champ ID 8 du formulaire ID 879.
/**
* Limit the times available in the Date Time field time picker.
*
* @link https://wpforms.com/developers/customize-the-date-time-field-time-picker/
*/
function wpf_dev_limit_time_picker() {
?>
<script type="text/javascript">
// Change this _879_8 to match the form ID and the field ID you have on your own form
window.wpforms_879_8 = window.wpforms_879_8 || {};
window.wpforms_879_8.timepicker = {
forceRoundTime: true,
// Disable lunch time and daily meeting time
disableTimeRanges: [
[ '9am', '10am' ],
[ '12pm', '1pm' ]
]
};
</script>
<?php
}
add_action( 'wpforms_wp_footer', 'wpf_dev_limit_time_picker', 30 );
Si vous avez besoin d'aide pour identifier les ID de formulaire ou de champ, veuillez consulter cet article.
Vos visiteurs peuvent voir les heures que vous avez désactivées avec l'extrait, mais ils ne peuvent pas les sélectionner.
C'est tout ce dont vous avez besoin pour personnaliser le sélecteur de temps pour le champ Date / Heure dans WPForms. Souhaitez-vous créer des formats supplémentaires pour votre sélecteur de date? Notre tutoriel, Comment créer des formats supplémentaires pour le champ Date vous montrera comment vous pouvez utiliser PHP pour y parvenir.
En rapport
Référence de l'action : wpforms_wp_footer
FAQ
Q : Puis-je également utiliser ce filtre pour modifier les intervalles de temps ?
A : Absolument ! Par défaut, le constructeur de formulaire WPForms vous donne l'option de définir vos intervalles de temps à 15 minutes, 30 minutes et 1 heure. Pour changer les intervalles de temps à 5 minutes, vous devez utiliser le code suivant :
/**
* Change the time intervals on the time picker
*
* @link https://wpforms.com/developers/customize-the-date-time-field-time-picker/
*/
function wpf_dev_limit_time_picker() {
?>
<script type="text/javascript">
// Change this _797 to match your own form ID number
window.wpforms_797 = window.wpforms_797 || {};
window.wpforms_797.timepicker = {
// Limit times to every 5 minutes
step: '5'
};
</script>
<?php
}
add_action( 'wpforms_wp_footer', 'wpf_dev_limit_time_picker', 30 );
N'oubliez pas de modifier le window.wpforms_797 et le step: '5' pour qu'il corresponde à l'ID de votre formulaire et à l'intervalle de temps que vous souhaitez utiliser.