Validate date format with jquery?

Question

Validate date format with jquery?

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (-1 votes)

0

I have an input of type date but when running it in the safari I can edit it in any way and I want to validate that it is written correctly with jquery?

 <input type="date" class="form-control" id="fechaentrega" name="fechaentrega">

jquery html

asked by Alcides Salazar 15.12.2016 в 00:31

source

3 answers

Error returning JSon data from the driver Listener CheckBox

score 1 · Answer 1

To validate in the format 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>

Original reference here

Just remember that date is not compatible in the browser firefox . Consider using a library like moment js

score 0 · Answer 2

here I leave the validation with jquery. This is when the focus is lost, the input validates the date. What it does is send you an Alert that tells you if it is invalid or is correct if it is correct you have the full date.

<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);
});

score -1 · Answer 3

Using jQuery and validating fecchas in DD/MM/YYYY format, you could do the following:

Validate the date as it is entered

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

Validate the date entered when doing blur of 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" />

Validate the entered date

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>