0

Tengo un problema al momento de validar fechas usandoJavaScript. Tengo el siguiente formulario:

<tr> 
    <td> 
        <input type="date" name="fecha1" value="<?php echo date($fecha1);?>"> 
    </td> 
</tr> 

<tr> 
    <td> 
        <input type="date" name="fecha2" value="<?php echo date($fecha2);?>"> 
    </td> 
</tr>

<tr>     
    <td> 
        <input type="date" name="fecha3" value="<?php echo date($fecha3);?>"> 
    </td> 
</tr> 

<tr> 
    <td> 
        <input type="date" name="fecha4" value="<?php echo date($fecha4);?>"> 
    </td> 
</tr>

Donde coloco 4 fechas.

Si la base de datos posee dicha fecha, la muestra, sino no muestra nada.

Mi duda es: Al momento de llenar el formulario con las fechas, cómo hago para validar que no se coloquen fechas anteriores a las ya cargadas, es decir, por ejemplo:

Si fecha1 = x fecha 
fecha2 no debe ser menor a fecha1 
fecha3 no debe ser menor a fecha2 
fecha4 no debe ser menor a fecha3 

¿Es posible?

4 respuestas 4

1

Se puede hacer iterando los campos anteriores al que se está editando actualmente y comprobando las fechas.

Nota: ten en cuenta que en éste código asumo que el formato es ISO 8601 (yyyy-mm-dd).

let inputs = document.querySelectorAll('.input');

[].forEach.call(inputs, (input, i) => {
  input.addEventListener('input', () => {
    if (i > 0) {
      let curDate = new Date(input.value);
      [].forEach.call(inputs, (input2, k) => {
        if (k < i) { // solo recorremos inputs anteriores al actual
          let previousDate = new Date(input2.value);
          if (curDate.getTime() < previousDate.getTime()) {
            input.classList.add('invalid');
          } else {
            input.classList.remove('invalid');
          }
        }
      });
    }
  });
});
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.input {
  border: 1px solid #ddd;
  border-radius: 3px;
  box-shadow: 0 1px 4px 0 rgba(0,0,0,.075) inset;
  padding: .5rem .85rem;
  width: 0;
}
.input.invalid {
  border-color: #d53400;
}
.input:focus {
  outline: none;
}
form {
  margin: 20px auto;
  width: 400px;
}
form article {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
form article .input { 
  flex-basis: 45%;
  margin: 5px 0;
}
form footer {
  padding: .5rem 0;
  text-align: right;
}
.btn {
  background-color: #f2f2f2;
  border: 1px solid transparent;
  border-radius: 3px;
  color: #555;
  padding: .5rem 1rem;
}
.btn.success {
  background-color: #2ecc71;
  color: #fff;
}
<form id="datesForm">
  <article>
    <input type="text" class="input" size="5" />
    <input type="text" class="input" size="5" />
    <input type="text" class="input" size="5" />
    <input type="text" class="input" size="5" />
  </article>
  <footer>
    <button class="btn success">Registrar</button>
  </footer>
</form>

En caso quiesies tratar con otro tipo de formato de fecha, tendrías que identificar el formato y convertirlas a ISO 8601 que es el que entiende JavaScript. Sin embargo, con Moment puedes hacerte las cosas más fáciles.

let curDate = moment(input.value);
...
let previousDate = moment(input2.value);

if (curDate < previousDate) {
  input.classList.add('invalid');
} else {
  input.classList.remove('invalid');
}

En la documentación de Moment puedes ver los formatos de fechas admitidos.

0

Prueba esto.

Se supone que validas la fecha en concreto con la anterior, la primer fecha deberá ir por defecto, el resto se compara con la anterior, espero que sea lo que estas buscando:

<tr> 
    <td> 
        <input type="date" name="fecha1" value="<?php echo date($fecha1);?>"> 
    </td> 
</tr> 

<tr> 
    <td> 
        <input type="date" name="fecha2" value="<?php 
            if ($fecha2 < $fecha1) {
                echo "No se agrega porque es menor";
            } else {
                echo date($fecha2);
            }
        ?>"> 
    </td> 
</tr>

<tr> 
    <td> 
        <input type="date" name="fecha3" value="<?php 
            if ($fecha3 < $fecha2) {
                echo "No se agrega porque es menor";
            } else {
                echo date($fecha3);
            }
        ?>">  
    </td> 
</tr> 

<tr> 
    <td> 
        <input type="date" name="fecha4" value="<?php 
            if ($fecha4 < $fecha3) {
                echo "No se agrega porque es menor";
            } else {
                echo date($fecha4);
            }
        ?>"> 
    </td> 
</tr>
2
  • Eso lo probé y funciona, pero lo que necesito es que el usuario, al momento de ingresar una fecha, salga una alerta que indique que la fecha no es correcta
    – user19356
    Commented el 16 ene. 2017 a las 18:48
  • utilizas un evento al momento de escribir cada letra y al detectarlo lo validas. Commented el 16 ene. 2017 a las 21:53
0

Cambio en el código para que se muestre gráficamente

<script type="text/javascript">

    //console.log(document.getElementsByName("fecha1"));

    function cambio (input) {

        var inputs = document.getElementsByTagName("input");

        console.log(input.value);

        var inputInt;

        for (var i = 0; i < inputs.length; i++) {

            if (inputs[i] == input) {

                inputInt = i;

            }

        }

        if (inputInt > 0) {

            if (inputs[inputInt -1].value > input.value) {

                input.style.background= "red";

            } else {

                input.style.background= "green";

            }

        } else {

            input.style.background= "green";

        }

    }

</script>

Todos los input deben ir de esta forma.

<table>

    <tr> 
        <td> 
            <input type="date" name="fecha1" value="2000-05-05" onkeyup="cambio(this)" onclick="cambio(this)">
        </td> 
    </tr> 

    <tr> 
        <td> 
            <input type="date" name="fecha2" value="2000-05-05" onkeyup="cambio(this) onclick="cambio(this)">
       </td> 
    </tr>

    <tr>
        <td> 
            <input type="date" name="fecha3" value="2000-05-05" onkeyup="cambio(this) onclick="cambio(this)">
        </td> 
    </tr> 

    <tr> 
        <td> 
            <input type="date" name="fecha4" value="2000-05-05" onkeyup="cambio(this) onclick="cambio(this)">
        </td> 
    </tr>

</table>

Una vez que veas que funcionó cambia los valores de los input por los tuyos.

Nota: si tienes mas input habría que hacer una validación para que solo te tome esos 4, ya que en la función JavaScript revisa todos los inputs.

2
  • Gracias por la respuesta, pero no me está validando nada. Pongo una fecha en el primer campo, y cuando pongo una anterior en el siguiente campo no pasa nada.
    – user19356
    Commented el 17 ene. 2017 a las 13:22
  • Ahí solo lo hacía por consola, he modificado el código para que sea gráfico que sí funciona, la forma estética no es muy adecuada pero ya de ahí tu puedes adapatarla. También ya depende de ti poner el action y retornar un false en tu formulario cuando haya una validación incorrecta y no se haga el submit. El codigo ahora funciona correctamente y se muestra cuando la fecha no cumple el requisito en el código de respuesta
    – Sr1871
    Commented el 17 ene. 2017 a las 14:55
0

Podrías intentar con un evento "change", al momento de cambiar el valor que se digita en el input, algo como

$("#fecha1, #fecha2, #fecha3, #fecha4").on('change', function(){ if(#fecha1 && #fecha1 >= #fecha2){//Y acá haces la alerta o el código que se debe ejecutar al cumplir la condición..} })

Ésto valida si hay una fecha1, y si la fecha1 es mayor o igual a la fecha2, y así sucesivamente con las otras fechas

O si lo deseas, lo puedes validar al momento que le de en el "submit", todas las fechas, ejm:

$("#form").on('submit', function (event) { event.preventDefault(); if ($("#fecha1").val() && $("#fecha1").val() >= $("#fecha2").val()) { alert("La fecha1 es mayor o igual que la fecha2") } })

Y repites la misma condición con el resto de las fechas

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.