0

tengo un problema, estoy elaborando el checkout de un carrito, y tengo día y hora de entrega, lo que pasa es que los dias anteriores los pude desahabilitar pero respecto a las horas me interesaria poder que solo el usuario pueda seleccionar la hora en un periodo de 15:00 - 22:00 horas.

Tengo como input lo siguiente, que me desahabilita días anteriores y los segundos.

 <body>
   <div class="col-12 mb-4">
     <label for="hora_entrega">Fecha y Hora de entrega: </label>
     <input type="datetime-local" id="hora_entrega" name="hora_entrega"  class="form-control" min="<?php echo (new DateTime())->format('Y-m-d H:i');?>" value="{{now()->format('Y-m-d H:i');}}" required>
   </div>
</body>

1 respuesta 1

0

Puedes obtener 2 soluciones, la primera es mediante una validación JavaScript en el formulario:

<body>
    <form onsubmit="return validate();">
        <p>Primera prueba con javascript</p>
        <div class="col-12 mb-4">
            <label for="hora_entrega">Fecha entrega: </label>
            <input type="datetime-local" id="fecha" name="fecha" class="form-control" min="<?php echo date('Y-m-d H:i'); ?>" required>
        </div>
        <input type="submit" value="Guardar" />
    </form>
    <script type="text/javascript">
        function validate() {
            var fecha = document.getElementById('fecha').value;
            var hora = fecha.substring(11);
            console.log(hora);
            if (hora >= '15:00' && hora <= '22:00') {
                console.log('Hora Correcta');
                return true;
            } else {
                console.log('Hora Incorrecta');
                return false;
            }
        }
    </script>
</body>

La segunda es separar los campos de fecha y hora sin necesidad de ninguna validación:

<body>
    <form>
        <p>Segunda prueba agregando 2 campos</p>
        <div class="col-12 mb-4">
            <label for="hora_entrega">Fecha entrega: </label>
            <input type="date" id="dia_entrega" name="dia_entrega" class="form-control" min="<?php echo date('Y-m-d'); ?>" required>
        </div>
        <div class="col-12 mb-4">
            <label for="hora_entrega">Hora de entrega: </label>
            <input type="time" id="hora_entrega" name="hora_entrega" class="form-control" min="15:00:00" max="22:00:00" required>
        </div>
        <input type="submit" value="Guardar" />
    </form>
</body>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.