JSFiddle - React, Tailwind, and code Playground

HTML

<form id="formulario" name="formulario" action="accion.php" method="post" onsubmit="return compararFecha() && compararHora()" >
  <input   id="fecha_inicio" name="fecha_inicio" value="" placeholder="FECHA INICIO"><br>
  <input  id="hora_inicio" name="hora_inicio" value="" placeholder="HORA INICIO"><br>
  <input id="fecha_final" name ="fecha_final" value="" placeholder="FECHA FINAL"><br>
  <input id="hora_final" name="hora_final" value="" placeholder="HORA FINAL"><br>
  <label for="tags">DescripciĂłn: </label><br>
  <input type="text" name="descripcion" id="descripcion" /><br>
  <input name="submit" type="submit" value="enviar">
</form>

JavaScript

function compararHora()
{
    var hora1 = document.getElementById("hora_inicio").value;
    var hora2 = document.getElementById("hora_final").value;
    var horaSep = new Date ('1970-01-01 ' + hora1);
    var horaSep2 = new Date ('1970-01-01 ' + hora2);
    if (horaSep.getTime() > horaSep2.getTime()) {
        alert('HORA 1 MAYOR HORA 2');
        return false;
    }
    return true;
}

function compararFecha()
{
    var fecha1 = document.getElementById("fecha_inicio").value;
    var fecha2 = document.getElementById("fecha_final").value;
    var indicada = new Date(fecha1);
    var indicada2 = new Date(fecha2);
    if(indicada.getTime() > indicada2.getTime()){
        alert('FECHA 1 MAYOR FECHA 2');
        return false;
    }
    return true;
 }