Comment personnaliser le sélecteur de date et d'heure

Introduction

Souhaitez-vous personnaliser le champ Date / Heure pour le sélecteur d'heure dans WPForms ? Le sélecteur d'heure propose à l'utilisateur une liste d'heures parmi lesquelles choisir. Ces heures peuvent être modifiées afin qu'une plage horaire spécifique soit disponible. Vous pouvez également fournir une option intégrée sur le générateur de formulaires pour limiter certaines heures.

Pour en savoir plus sur la configuration d'une limite unique pour le sélecteur d'heure, veuillez consulter cette documentation.

Dans ce tutoriel, nous vous montrerons comment personnaliser le sélecteur d'heure sur le champ Heure pour désactiver plusieurs heures à l'aide d'un petit extrait de code PHP.

Création de votre formulaire

Tout d'abord, nous allons créer un nouveau formulaire, ajouter nos champs et ajouter un champ de formulaire Heure.

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 de 8h à 17h pour l'heure d'ouverture et de fermeture de notre bureau.

Ajout du snippet

Ensuite, nous voulons désactiver l'heure de 9h à 10h pour une réunion quotidienne à l'échelle de l'entreprise, mais nous voulons également désactiver la plage horaire de 12h à 13h qui correspond aux heures de déjeuner. Pour ce faire, nous devons ajouter un extrait de code à notre site.

Il existe trois façons différentes d'appliquer cela :

• Tous les sélecteurs d'heure sur le site
• Tous les sélecteurs d'heure à l'intérieur d'un formulaire spécifique
• Un sélecteur d'heure spécifique à l'intérieur d'un formulaire spécifique.

Choisissez l'extrait de code qui convient à vos besoins et copiez-le sur votre site.

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

Tous les sélecteurs d'heure sur le site

Ce qui suit s'appliquera à tous les sélecteurs d'heure du 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 d'heure à l'intérieur d'un formulaire spécifique

Ce qui suit s'appliquera à tous les sélecteurs d'heure à 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 d'heure spécifique à l'intérieur d'un formulaire spécifique

Ce qui suit s'appliquera au sélecteur d'heure du champ ID 8 à 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_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 de code, mais ils ne pourront pas les sélectionner.

C'est tout ce dont vous avez besoin pour personnaliser le sélecteur d'heure 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.

Articles associés

Référence d'action : wpforms_wp_footer

FAQ

Q : Puis-je également utiliser ce filtre pour modifier les intervalles de temps ?

R : Absolument ! Par défaut, le générateur de formulaires WPForms vous donnera la possibilité de définir vos intervalles de temps sur 15 minutes, 30 minutes et 1 heure. Pour modifier les intervalles de temps à 5 minutes, vous utiliseriez 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 changer window.wpforms_797 et step: '5' pour qu'ils correspondent à l'ID de votre formulaire et à l'intervalle de temps que vous souhaitez utiliser.