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:
- dos inputs con el mismo nombre se "pisan", primando el valor del último
- 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>
YYYY-mm-dd
, por lo que debes cambiar tu código adocument.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 :)