Tras debatir en el chat acerca de la funcionalidad deseada, éste es el resultado:
function validacionDia(event) {
var key = event.which || event.keyCode;
/* Observamos el resultado que generará la tecla */
var día = parseInt(
miformulario.dia.value +
String.fromCharCode(key)
);
/* Si no está dentro de lo esperado cancelamos la pulsación */
if (
isNaN(día) === true ||
día < 1 ||
día > 31
) {
return false;
}
return true;
}
<form name="miformulario">
<input type="text"
name="dia" id="iddia"
onkeypress="return validacionDia(event)" />
</form>
Respuesta original
He usado una funcionalidad que te provee el objeto Date
en el que si indicas un día 0 te selecciona el último día del mes anterior y, además, te permitiría tener días de más del soportado por el mes incrementando internamente el número de mes y/o año.
function comprobar(obj, tecla) {
switch(obj.name) {
case 'año':
var año = parseInt(obj.value);
if (isNaN(año)) {
obj.value = 2017;
} else if (año < 1970) {
obj.value = 1970;
} else if (año > 2018) {
obj.value = 2018;
}
return comprobar(document.f.mes);
break;
case 'mes':
var mes = parseInt(obj.value);
if (isNaN(mes)) {
obj.value = 5;
} else if (mes < 1) {
obj.value = 1;
} else if (mes > 12) {
obj.value = 12;
}
return comprobar(document.f.día);
break;
case 'día':
if (obj.value === '' && tecla === true) {
return true;
}
var día = parseInt(obj.value);
var último = new Date(
parseInt(document.f.año.value),
parseInt(document.f.mes.value),
0
).getDate();
if (isNaN(día)) {
if (tecla === true) {
return false;
} else {
obj.value = 8;
}
} else if (día < 1) {
if (tecla === true) {
return false;
} else {
obj.value = 1;
}
} else if (día > último) {
if (tecla === true) {
return false;
} else {
obj.value = último;
}
}
break;
}
return true;
}
function enviar() {
alert('Fecha: ' +
document.f.año.value + '-' +
document.f.mes.value + '-' +
document.f.día.value
);
return false;
}
<form name="f" onsubmit="return enviar()">
<input type="number" name="año"
min="1970" max="2018" value="2017"
onblur="comprobar(this)"
onchange="comprobar(this)"
/>
<input type="number" name="mes"
min="1" max="12" value="5"
onblur="comprobar(this)"
onchange="comprobar(this)"
/>
<input type="number" name="día"
min="1" max="31" value="8"
onblur="comprobar(this)"
onkeyup="return comprobar(this, true)"
onchange="comprobar(this)"
/>
<input type="submit" value="Mostrar fecha" />
</form>
Teóricamente habría que restar uno al mes en curso, pero como Date
cuenta enero como 0
y diciembre como 11
no es necesario hacerlo.
Hay que tener cuidado al usar el evento onkeyup
porque no permite escribir un número desde una cadena vacía a menos que desarrollemos esa excepción.
Como nueva edición he desarrollado esa excepción, evitando la pulsación de una tecla que provoque que el valor sea NaN
(letras, por ejemplo), o se salga de los límites, pero no repone el valor máximo, mínimo o por defecto hasta que salgamos del campo.
Por último, prácticamente todos los navegadores compatibles con HTML5 soportan el campo <input>
de tipo date
.
En ese enlace se muestran todos los problemas que te puedas encontrar con el uso de dicha etiqueta (como mostrar fechas localizadas) e incluso usos para solicitar rangos de fechas admitidos:
<input type="date" min="2010-01-01" max="2018-12-31" />
Pero si usas jQuery te recomiendo usar su widget datepicker
que soluciona compatibilidad con navegadores y localización a través de su propiedad dateFormat
:
$( "#fecha" ).datepicker({
regional: 'es',
dateFormat: "dd/mm/yyyy"
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"><script src="//code.jquery.com/jquery-1.12.4.js"></script><script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script><script src="https://cdn.rawgit.com/jquery/jquery-ui/master/ui/i18n/datepicker-es.js"></script>
<div id="fecha"></div>
PD: He agregado el atributo regional
para que los textos aparecieran en castellano.