1

Necesito que el usuario señale fecha y hora en el que será una cita. Lo hago por medio de un input de tipo datetime. Se requiere que los minutos solo se puedan seleccionar cada 30, o sea 30 y 00. Estuve investigando y se supone que con el atributo step se puede, se le colocan los segundos de cada cuantos quieres seleccionar el tiempo, pero parece no funcionar.

<input class="date" type="datetime-local" id="##0##" name="##0##" value="##1##" min="2020-01-01T00:00" max="2100-01-01T00:00" step="1800">
1
  • Buen día, si la respuesta te fue útil no olvides aceptarla, de esa forma ayudas a otros usuarios a encontrar la solución a preguntas similares y al mismo tiempo ayudas a la comunidad a mantener abiertas únicamente las preguntas que no han sido resueltas. ¿Qué debo hacer cuando alguien contesta mi pregunta?. el 17 feb. a las 7:17

1 respuesta 1

1

Buen día,

El atributo step no impide que los usuarios seleccionen cualquier minuto al hacerlo a través de la pequeña ventana con el calendario, hora y minuto, más bien sirve para definir el "paso" que van a dar los minutos al oprimir las flechas hacia arriba o hacia abajo.

Si seleccionas con el puntero los minutos:

Ejemplo de seleccionar los minutos con el puntero

Y oprimes desde tu teclado las flechas hacia arriba o hacia abajo entonces ahí verás reflejado el step que configures.

Si deseas limitar completamente la entrada de minutos podrías utilizar únicamente el tipo date y utilizar tal vez select con el paso que desees.

Ejemplo:

<input class="date" type="date" id="##0##" name="##0##" value="##1##" min="2020-01-01T00:00" max="2100-01-01T00:00" step="1800">

<select id="hours"></select>
<select id="minutes"></select>

<script>
    function createOption(value, text) {
        var option = document.createElement('option');
        option.text = text;
        option.value = value;
        return option;
    }
    
  // Limitamos las horas de 8 a 18
    var hourSelect = document.getElementById('hours');
    for(var i = 8; i <= 18; i++){
        hourSelect.add(createOption(i, i));
    }
  
  // Configuramos el paso en 30 minutos
    var minutesSelect = document.getElementById('minutes');
    for(var i = 0; i < 60; i += 30) {
        minutesSelect.add(createOption(i, i));
    }
</script>

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.