Tengo un input de tipo date pero al correrlo en el safari puedo editarlo de cualquier forma y quiero validar que se escriba de la forma correcta con jquery?
<input type="date" class="form-control" id="fechaentrega" name="fechaentrega">
Stack Overflow en español es un sitio de preguntas y respuestas para programadores y profesionales de la informática. Solo te toma un minuto registrarte.
Regístrate para unirte a esta comunidadTengo un input de tipo date pero al correrlo en el safari puedo editarlo de cualquier forma y quiero validar que se escriba de la forma correcta con jquery?
<input type="date" class="form-control" id="fechaentrega" name="fechaentrega">
aquí te dejo la validación con jquery. Esta para cuando pierda el foco el input valide la fecha. Lo que hace es enviarte un Alert que te dice si es invalida o es correcta en caso que sea correcta teda la fecha completa.
<input type="text" class="form-control" id="fechaentrega" name="fechaentrega" value="">
$("#fechaentrega").focusout(function(){
s= $(this).val();
var bits = s.split('/');
var d = new Date(bits[2] + '/' + bits[0] + '/' + bits[1]);
alert(d);
});
Para validar en el formato dd/mm/yyyy:
function isValidDate(dateString)
{
// revisar el patrón
if(!/^\d{4}\-\d{1,2}\-\d{1,2}$/.test(dateString))
return false;
// convertir los numeros a enteros
var parts = dateString.split("/");
var day = parseInt(parts[2], 10);
var month = parseInt(parts[1], 10);
var year = parseInt(parts[0], 10);
// Revisar los rangos de año y mes
if( (year < 1000) || (year > 3000) || (month == 0) || (month > 12) )
return false;
var monthLength = [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ];
// Ajustar para los años bisiestos
if(year % 400 == 0 || (year % 100 != 0 && year % 4 == 0))
monthLength[1] = 29;
// Revisar el rango del dia
return day > 0 && day <= monthLength[month - 1];
};
$("button").click(function() {
alert( isValidDate($("#fechaentrega").val()) );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="date" class="form-control" id="fechaentrega" name="fechaentrega" value="2012-12-15">
<button>send</button>
Referencia original aquí
Solo recuerda que date
no es compatible en el navegador firefox
. Considera utilizar alguna librería como moment js
268
La expresión regular que pegó no valida los años bisiestos correctamente, pero hay uno que sí lo hace en la misma publicación . Lo modifiqué para llevar dd/mm/yyyy
, dd-mm-yyyy
o dd.mm.yyyy
.
^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[13-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$
Lo probé un poco en el enlace que Arun proporcionó en su respuesta y también aquí y parece funcionar.
Edite el 14 de febrero de 2019: eliminé una coma que estaba en la expresión regular que permitía fechas como 29-0,-11
tomado de otra respuesta en la sección de ingles y traducido al español, para ver original aqui
Usando jQuery
y validar fecchas en formato DD/MM/YYYY
podrías hacer lo siguiente:
$('.input-date').on('input', function (evt) {
var v = this.value,
l = v.length,
d,
b;
if (
l === 1 && /^[0-3]/.test(v) || // D
l === 2 && /^0[1-9]|[12]\d|3[01]$/.test(v) || // DD
l === 3 && /^\/$/.test(v[2]) || // DD/
l === 4 && /^[0-1]$/.test(v[3]) || // DD/M
l === 5 && /^0[1-9]|1[0-2]$/.test(v[3]+''+v[4]) || // DD/MM
l === 6 && /^\/$/.test(v[5]) || // DD/MM/
l === 7 && /^[12]$/.test(v[6]) || // DD/MM/Y
l === 8 && /^\d$/.test(v[7]) || // DD/MM/YY
l === 9 && /^\d$/.test(v[8]) || // DD/MM/YYY
l === 10 && /^\d$/.test(v[9]) // DD/MM/YYYY
) {
// Control fecha valida
d = v.split(/\//);
if (l === 10) {
b = (new Date(d[2], d[1] - 1, d[0])).toISOString().substr(0,10).split('-')
}
// Meses con 3* dias
if (l === 5 && v[0] === '3' &&
(d[1] === '02' ||
(v[1] === '1' && ['04','06','09','11'].indexOf(d[1]) !== -1)
)) {
;//Error, el mes no tiene 3* dias
}
// Año bisiesto
else if (l === 10 && d[0] === '29' && d[1] === '02' && b[2] != d[0]) {
;//Error, el año no es bisiesto, febrero no puede tener 29 dias
} else {
return;
}
}
this.value = v.substr(0, l - 1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="input-date" />
blur
del input
function isValidDate (value) {
var valid = false,
info,
real;
// Validar formato
if (/^(0?[1-9]|[12][0-9]|3[01])[\/](0?[1-9]|1[012])[\/]\d{4}$/.test(value)) {
// Validar fecha
info = value.split(/\//);
real = (new Date(info[2], info[1] - 1, info[0])).toISOString().substr(0,10).split('-');
if (info[0] === real[2] && info[1] === real[1] && info[2] === real[0]) {
valid = true;
}
}
return valid;
}
$('.input-date').on('focusout', function(){
console.log(isValidDate(this.value));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="input-date" maxlength="10" />
function isValidDate (value) {
var valid = false,
info,
real;
// Validar formato
if (/^(0?[1-9]|[12][0-9]|3[01])[\/](0?[1-9]|1[012])[\/]\d{4}$/.test(value)) {
// Validar fecha
info = value.split(/\//);
real = (new Date(info[2], info[1] - 1, info[0])).toISOString().substr(0,10).split('-');
if (info[0] === real[2] && info[1] === real[1] && info[2] === real[0]) {
valid = true;
}
}
return valid;
}
$('#enviar').on('click', function () {
console.log(isValidDate($('.input-date').val()));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="input-date" />
<button id="enviar">Enviar</button>