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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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