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

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

En este tutorial, te guiaremos a través de los pasos para restringir el rango de tiempo disponible para una fecha específica, manteniendo los límites de tiempo generales para todas las demás fechas.

Creación del formulario

En primer lugar, tendrá que crear su formulario y añadir 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:

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

Añadir límites de tiempo condicionales

Ahora es el momento de añadir el fragmento a su sitio.
Si no está seguro de dónde o cómo agregar fragmentos de código, por favor vea 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 comprueba la fecha seleccionada y ajusta las horas disponibles en consecuencia.
En el ejemplo anterior:

• Todos los días se puede elegir entre las 11.00 y las 17.00 horas.
• El 4 de octubre de 2025, el radio de acción se reduce de 11:00 a 14:00 horas.

Asegúrese de reemplazar:

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

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

Y ¡listo! Ha establecido con éxito límites de tiempo condicionales para una fecha específica en su campo Fecha/Hora de WPForms.

¿Desea bloquear también por completo determinados intervalos de fechas? Consulta nuestro tutorial sobre cómo personalizar las opciones de fecha del campo Fecha/Hora.