0

Quiero preguntar si es posible cambiar los valores por defecto a escoger en un input de tipo datetime, específicamente la hora y los minutos. Cómo se muestra en la imagen, me da para escoger entre las 24 horas del día y los 60 minutos también, pero, por ejemplo, pregunto si es posible hacerlo cada 10 minutos, siendo 10, 20, 30, 40 y 50 los valores a escoger:

introducir la descripción de la imagen aquí

Se que con el atributo step puedo obtener un resultado similar, pero busco saber si es posible hacerlo desde el lugar que indico.

<input name="input_fecha" type="datetime-local" step="600">
0

1 respuesta 1

0

Tu te encuentras en lo peor de 2 mundos. El manejo de fechas en javascript es horrible y la customización de componentes nativos es casi inexistente.

El step en los datetime-local solo funciona cuando la entrada es por teclado y usas las flechas arriba y abajo. No cambia lista de elementos en la ventana modal. (cosa que estoy casi seguro que alguna vez si ocurría). Obviamente todo esto dependerá finalmente del navegador, por lo que el comportamiento varia siempre

Para setear el atributo step por javascript solo debes hacer:

const UnInput = document.getElementById("uninput");
UnInput.step = "600";
<input id="uninput" name="input_fecha" type="datetime-local">

Ahora también puedes crear una función que redondeé los minutos cuando el usuario ha seleccionado una fecha/hora

Algo así:

function redondear(){
  const factor = Number(event.target.step) / 60;
  let valor = new Date(event.target.value);
  
  if(valor.getMinutes() % factor != 0){
     const min_round = Math.round(valor.getMinutes() / 10) * 10;
     let now = new Date()
     valor.setMinutes(min_round - now.getTimezoneOffset());
     event.target.value =valor.toISOString().slice(0, 19);
  }
}
<input name="input_fecha" type="datetime-local" oninput="redondear()" step="600">

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.