Establecer límites de tiempo condicionales para fechas específicas en un campo de fecha/hora

¿Le gustaría limitar las opciones de hora disponibles en su campo de Fecha/Hora para fechas específicas? Por defecto, el campo de Fecha/Hora en WPForms le permite establecer rangos de hora generales utilizando la configuración del constructor de formularios. Sin embargo, si necesita aplicar límites de hora especiales para una fecha en particular (por ejemplo, horas de recogida más cortas en un día festivo), puede hacerlo fácilmente con un pequeño fragmento de JavaScript.

En este tutorial, le guiaremos a través de los pasos para restringir el rango de hora disponible para una fecha específica, mientras se mantienen los límites de hora generales para todas las demás fechas.

Creación del formulario

Primero, deberá crear su formulario y agregar el campo Fecha/Hora.
Si desea que los usuarios seleccionen la fecha y la hora por separado, asegúrese de que el tipo de campo esté configurado como Fecha / Hora en Formato.

Por ejemplo:

• Hora general de recogida: 11:00 a 17:00
• Día especial (4 de octubre de 2025): 11:00 a 14:00

Añadir Límites de Hora Condicionales

Ahora es el momento de agregar el fragmento a su sitio.
Si no está seguro de dónde o cómo agregar fragmentos de código, consulte nuestro tutorial sobre cómo agregar PHP o JavaScript personalizado para 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);

Este fragmento verifica la fecha seleccionada y ajusta las horas disponibles en consecuencia.
En el ejemplo anterior:

• Todos los días permiten la selección de hora de 11:00 a 17:00.
• El 4 de octubre de 2025, el rango se reduce de 11:00 a 14:00.

Asegúrese de reemplazar:

• 815 con el ID de su formulario.
• 12 con el ID de su campo de Fecha/Hora

Si no está seguro de cómo encontrarlos, consulte nuestra guía sobre cómo localizar el ID del formulario y el ID del campo.

¡Y eso es todo! Ha configurado con éxito límites de hora condicionales para una fecha específica en su campo de Fecha/Hora de WPForms.

¿También le gustaría bloquear rangos de fechas específicos por completo? Consulte nuestro tutorial sobre cómo personalizar las opciones de fecha del campo de Fecha/Hora.