1

Intenté buscar por todos lados, pero no puedo solucionar mi problema, que es el siguiente:

Tengo un input tipo "date" que a veces no se usa, mi idea es con un checkbox de HTML bloquearlo mediante js. El problema es que le quiero poner un valor predefinido, pero no encuentro forma. Hasta ahora el código que tengo es el siguiente:

function habilitar(value) {
  if(value==true) {
    document.getElementById("extintorid").disabled=true;
  }else if(value==false){
    document.getElementById("extintorid").disabled=false;
  }
}
<input type="date" name="vencextintor" placeholder="Extintor" class="input-50" id="extintorid">
<input type="checkbox" id="check" onchange="habilitar(this.checked);">

A ver, esta bien que cuando le doy al check se deshabilite, pero también quiero cambiarle el valor por ejemplo a 99/99/9999, porque si el campo ese queda vacío, me genera un problema que no viene al caso. He intentando con:

document.getElementById('extintorid').value = "99/99/9999", pero no me funciona.

1
  • Precisamente vengo de tu otra pregunta y ésta demuestra lo que estás comentiendo el error que te dije, aunque al usuario se le muestre la fecha en formato local, internamente en javascript se trata en formato YYYY-mm-dd, por lo que debes cambiar tu código a document.getElementById('extintorid').value = "año-mes-día". Si hubieras hecho caso a estas respuestas no te hubiera salido el problema que tienes hoy en día :) Commented el 13 mar. 2020 a las 10:33

3 respuestas 3

2

Primero, un input de tipo date siempre espera un valor en formato ISO-8601 (YYYY-MM-DD). Aunque la máscara ofrecida al usuario sea la que el navegador le ofrezca acorde a su locale (por ejemplo, DD/MM/YYYY), ésta no es el valor interno del input. Asignarle el valor 01/01/2020, que no es una fecha ISO válida, sólo hará que pase a un estado indefinido. Lo mismo con una fecha en formato ISO pero con meses o días inválidos 2021-35-32 y con mayor razón una fecha que no tiene formato ISO y tampoco es válida como 99/99/9999. La fecha 9999-05-05 es perfectamente válida. Puede tardar eso sí.

let controlFecha = document.querySelector('#extintorid'),
  asignar_valor = [...document.querySelectorAll('.asignar_valor')];

asignar_valor.forEach((boton) => {
  boton.addEventListener('click', (e) => {
    controlFecha.value = e.target.value;
  });
});
   <input type="date" name="vencextintor" value="2020-01-01"  id="extintorid" /> Asignar valor:
  <input type="button" class="asignar_valor" value="9999-05-05">
  <input type="button" class="asignar_valor" value="2021-35-32">
  <input type="button" class="asignar_valor" value="05/05/2020">
 

Estando indefinido, enviará un valor vacío y tendrás el problema que mencionaste no venía al caso.

Segundo, si el input está checked, el selector de fecha debe deshabilitarse, y si no lo está, debe habilitarse. Por lo tanto bastaría con decirle:

let controlFecha = document.querySelector('#extintorid'),
  checkBox = document.querySelector('#check');

checkBox.addEventListener('click', (e) => {
  controlFecha.disabled = e.target.checked;
});
<input type="date" name="vencextintor" value="2020-05-05" id="extintorid" />
<input type="checkbox" id="check"  />

Lo de arriba, sin embargo, trae a la luz otro problema en dos escenarios. Cuando ese input está deshabilitado:

Caso 1: Quieres recuperar su valor a mano

Incluso deshabilitado, sigue teniendo el valor que se le haya ingresado, pero tú quieres pisarlo con un valor por defecto. Para este escenario, puedes darle valor al checkbox representando la fecha "válida pero sin significado"

let controlFecha = document.querySelector('#extintorid'),
  checkBox = document.querySelector('#check');

checkBox.addEventListener('click', (e) => {
  controlFecha.disabled = e.target.checked;
  controlFecha.value = e.target.value;
});
<input type="date" name="vencextintor" value="2020-05-05" id="extintorid" />
<input type="checkbox" id="check" value="9999-01-01" />

Caso 2: Quieres enviar su valor como parte de un formulario

Esto es un problema, porque estando deshabilitado no enviará la fecha "válida pero sin significado". Más bien no se enviará el campo.

En este escenario, puedes aprovechar el comportamiento natural de los formularios que es:

  1. dos inputs con el mismo nombre se "pisan", primando el valor del último
  2. un checkbox no seleccionado no se envía. (es omitido por completo)

Entonces, sin modificar el valor del input de fecha, un checkbox con el mismo nombre en estado activo provocará que se envíe su valor en reemplazo del input fecha que se ha deshabilitado.

let controlFecha = document.querySelector('#extintorid'),
  checkBox = document.querySelector('#check'),
  simularEnvio = document.querySelector('#simular_envio'),
  formulario = document.querySelector('#formulario');

checkBox.addEventListener('click', (e) => {
  controlFecha.disabled = e.target.checked;
});

simularEnvio.addEventListener('click', function(e) {
  let formData = new FormData(formulario);
console.log('Se enviará:');
  for (let pair of formData.entries()) {
    console.log(pair[0] + ' = ' + pair[1]);
  }
  return false;
});
<form id="formulario">
  <input type="date" name="vencextintor" value="2020-05-05"  id="extintorid" />
  <p>
    <label for="#check">
  Deshabilitar fecha:
  <input type="checkbox" id="check" name="vencextintor" value="9999-01-01" />
  </label>
  </p>
</form>
<button id="simular_envio">Simular Envío</button>

0

En tu código Javascript no asignas nada al elemento.

Si observas aquí, cuando se deshabilita el elemento adquiere el valor *** (el cual he puesto a modo de prueba) y cuando se habilita adquiere 99/99/9999.

Para no estar haciendo uso constante de document.getElementById es mejor crear una sola referencia al elemento y luego usar esa referencia.

function habilitar(value) {
  var elInput = document.getElementById("extintorid");
  if (value == true) {
    elInput.disabled = true;
    elInput.value = "***";
  } else if (value == false) {
    elInput.disabled = false;
    elInput.value = "99/99/9999";
  }
}
<input type="date" name="vencextintor" placeholder="Extintor" class="input-50" id="extintorid" />
<input type="checkbox" id="check" onchange="habilitar(this.checked);" />

Si quieres, puedes simplificar el código, asignando el valor por defecto en una variable y estableciendo el estado del input en base a si el checkbox está chequeado o no.

Mira este ejemplo. Para evitar confusiones, he cambiado el nombre del parámetro a isChecked, ya que el uso de value como variable para este caso se presta a confusión. Usar una convención de nombre adecuada es aconsejable.

function habilitar(isChecked) {
  var elInput = document.getElementById("extintorid");
  var elValue= (isChecked) ? "***": "99/99/9999";
  elInput.disable=isChecked;
  elInput.value=elValue;
}
<input type="date" name="vencextintor" placeholder="Extintor" class="input-50" id="extintorid" />
<input type="checkbox" id="check" onchange="habilitar(this.checked);" />

De todos modos, creo que te estás complicando la vida haciendo esto. Es mejor establecer un control allí donde recibes los datos, asignando un valor por defecto cuando el input de la fecha no se reciba o se reciba vacío.

Otra cosa que deberías evitar es el uso de funciones in line. Esto no respeta el principio de separación del código. Si en un futuro hay que hacer cambios en la función habilitar, al haberla puesto en el HTML vas a tener que empezar a buscar todos los archivos HTML que tienen esa función in line para cambiarla. Es mejor que escuches el onchage desde código Javascript y que lo quites del checkbox.

0

Debes agregar una fecha válida para que se inserte en el input, ya que 9999/99/99 no es una fecha válida y puedes asignar el elemento a una variable para que el código sea más limpio.

Luego, cuando el check no esté seleccionado, dejas el valor vacío para que reciba la fecha ingresada por el usuario.

function habilitar(value) {
  var campoFecha = document.getElementById("extintorid");
  if(value==true){
    campoFecha.value = "1900-01-01";
    campoFecha.disabled = true;
  } else {
    campoFecha.value = "";
    campoFecha.disabled = false;
  }
}
<!DOCTYPE html>
<html>
  <body>
    <input type="date" name="vencextintor" placeholder="Extintor" class="input-50" id="extintorid">
    <input type="checkbox" id="check" onchange="habilitar(this.checked)">
  </body>
</html>

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.