Skip to main content

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.

Sr1871
  • 5.8k
  • 1
  • 12
  • 16