Définir des limites de temps conditionnelles pour des dates spécifiques dans un champ Date/Heure

Souhaitez-vous limiter les options de temps disponibles dans votre champ Date/Heure pour des dates spécifiques ? Par défaut, le champ Date/Heure dans WPForms vous permet de définir des plages horaires générales à l'aide des paramètres du constructeur de formulaires. Cependant, si vous avez besoin d'appliquer des limites de temps spéciales pour une date particulière (par exemple, des heures de retrait plus courtes lors d'un jour férié), vous pouvez facilement le faire à l'aide d'un petit extrait de code JavaScript.

Dans ce tutoriel, nous vous guiderons à travers les étapes pour restreindre la plage horaire disponible pour une date spécifique, tout en conservant les limites horaires générales pour toutes les autres dates.

Création du formulaire

Tout d'abord, vous devrez créer votre formulaire et ajouter le champ Date/Heure.
Si vous souhaitez que les utilisateurs sélectionnent la date et l'heure séparément, assurez-vous que le type de champ est défini sur Date / Heure sous Format.

Par exemple :

• Heure générale de retrait : 11h00 à 17h00
• Jour spécial (4 octobre 2025) : 11h00 à 14h00

Ajout de limites de temps conditionnelles

Il est maintenant temps d'ajouter l'extrait à votre site.
Si vous ne savez pas où ou comment ajouter des extraits de code, veuillez consulter notre tutoriel sur l'ajout de PHP ou JavaScript personnalisé pour WPForms.

add_action('wpforms_wp_footer_end',function(){?>
<script type="text/javascript">
jQuery(document).ready(function($){

    var formID=815; // WPForms form ID
    var fieldID=12; // WPForms field ID (Date/Time)

    var dateField=$('#wpforms-'+formID+'-field_'+fieldID);
    var timeField=$('#wpforms-'+formID+'-field_'+fieldID+'-time');
    function updateTimeLimits(){
        var selectedDate=dateField.val();
        if(!selectedDate)return;
        var parts=selectedDate.split('/');
        var day=parseInt(parts[0],10);
        var month=parseInt(parts[1],10);
        var year=parseInt(parts[2],10);
        var minTime='11:00';
        var maxTime='17:00';
        if(month===10&&day===4){maxTime='14:00';}
        var today=new Date();
        var selected=new Date(year,month-1,day);
        if(today.toDateString()===selected.toDateString()){
            var nowH=today.getHours();
            var nowM=today.getMinutes();
            if(nowM>0){nowH++;nowM=0;}
            var currentMin=(nowH<10?'0':'')+nowH+':00';
            if(currentMin>minTime){minTime=currentMin;}
        }
        timeField.timepicker('option',{minTime:minTime,maxTime:maxTime});
    }
    dateField.on('change',updateTimeLimits);
    updateTimeLimits();
});
</script>
<?php},10);

Cet extrait vérifie la date sélectionnée et ajuste les heures disponibles en conséquence.
Dans l'exemple ci-dessus :

• Chaque jour permet la sélection de l'heure de 11h00 à 17h00.
• Le 4 octobre 2025, la plage est réduite de 11h00 à 14h00.

Assurez-vous de remplacer :

• 815 par l'ID de votre formulaire.
• 12 par l'ID de votre champ Date/Heure

Si vous ne savez pas comment les trouver, consultez notre guide sur comment localiser l'ID du formulaire et l'ID du champ.

Et voilà ! Vous avez défini avec succès des limites de temps conditionnelles pour une date spécifique dans votre champ Date/Heure WPForms.

Souhaitez-vous également bloquer certaines plages de dates entièrement ? Consultez notre tutoriel sur comment personnaliser les options de date du champ Date/Heure.