Définition de limites temporelles 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 de WPForms vous permet de définir des plages horaires générales en utilisant les paramètres du constructeur de formulaire. Cependant, si vous avez besoin d'appliquer des limites de temps spéciales pour une date particulière (par exemple, des heures de ramassage plus courtes lors d'un jour férié), vous pouvez facilement le faire en utilisant un petit extrait JavaScript.

Dans ce tutoriel, nous vous expliquons comment restreindre la plage horaire disponible pour une date spécifique, tout en conservant des limites de temps générales pour toutes les autres dates.

Création du formulaire

Tout d'abord, vous devez 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 :

• Horaire général de ramassage : de 11h00 à 17h00
• Journée spéciale (4 octobre 2025) : 11:00 à 14:00

Ajout de délais conditionnels

Il est maintenant temps d'ajouter le snippet à votre site.
Si vous ne savez pas où ou comment ajouter des snippets de code, veuillez consulter notre tutoriel sur l'ajout de PHP ou JavaScript personnalisés 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 :

• Tous les jours, il est possible de choisir l'heure entre 11h00 et 17h00.
• Le 4 octobre 2025, la plage est réduite de 11 heures à 14 heures.

Veillez à les remplacer :

• 815 avec votre numéro de formulaire.
• 12 avec l'ID du champ Date/Heure

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

Et c'est tout ! Vous avez réussi à définir des limites de temps conditionnelles pour une date spécifique dans le champ Date/Heure de votre WPForms.

Vous souhaitez également bloquer complètement certaines plages de dates ? Consultez notre tutoriel sur la personnalisation des options de date du champ Date/Heure.