0

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">

introducir la descripción de la imagen aquí

3
  • 1
    ¿en el formato mm/dd/yyyy?
    – Rene Limon
    el 14 dic. 2016 a las 23:38
  • 1
    Cuando hablas de forma correcta, a que haces referencia? el 14 dic. 2016 a las 23:50
  • a la forma del tipo type="date" del input el 15 dic. 2016 a las 1:08

4 respuestas 4

1

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);
}); 
1
  • ¿Estás seguro de que se está pasando en el orden correcto (d/M/y)? ¿y dónde se está realizando la validación?
    – Mariano
    el 17 dic. 2016 a las 6:12
0

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

0

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

-1

Usando jQuery y validar fecchas en formato DD/MM/YYYY podrías hacer lo siguiente:

  • Validar la fecha a medida que es ingresada

$('.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" />

  • Validar la fecha ingresada al hacer 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" />

  • Validar la fecha ingresada

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>

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.