Query with JQuery alert-Confirm in Javascript

This is the site from which I occupy custom alerts: link

I have a personalized alert which shows me a message whenever a condition is not met.

This is the code:

function ValidaFecha(e){

  var fecha1 = new Date(desde.value);
  var fecha2 = new Date(hasta.value);
  var hoy = new Date();
  
  if (fecha2 < fecha1) {

    
    alert('La fecha final no puede ser menor que la fecha final.'); 
    return false;
  
  }else if(fecha1 < hoy){
    alert('La fecha escogida no puede ser menor que la fecha actual');
    document.getElementById('desde').focus();
    return false;
  
  }
  else{
    return true;
  }
}

.option2{
  
  position: relative;
  left: 0cm;
  width: 25%;
  border-style: solid;
  border-radius: 5px;
  border-width: 1px;
  border-color: black;
  height: 6mm;
  outline-style: none;
}
.option{
  
  width: 25%;
  border-style: solid;
  border-radius: 5px;
  border-width: 1px;
  border-color: black;
  height: 6mm;
  outline-style: none;
}
.body{
  
  font-family: 'Segoe UI';

}
.form-control{
   border-style: solid;
   border-radius: 5px;
   border-width: 1px;
   padding-left: 1mm;
   outline-style: none;
}
.btn{
 
 border-style: solid;
 border-color: black;
 border-width: 1px;
 border-radius: 5px;
 background-color: rgba(0,0,0,0.5);
 color: white;
 width: 25%;
 height: 7mm;
 font-size: 11pt;
 transition-duration: 0.2s;
 outline-style: none;
}
.btn:hover{
 
 transform: scale(0.9);
 transition-duration: 0.2s;
}

<form name="horario" id="horario" action="#">
<div class="body">
  <label>SELECCIONE UN RANGO DE FECHAS</label>
  <br><br>
  <span>Inicio:</span>
  <input type="date" class="form-control" name="desde"  id="desde" required="required" />&nbsp;
   <span>Termino:</span>
   <input type="date" class="form-control" name="hasta" id="hasta" required="required"/>
<br><br>
<label>SELECCIONE UN HORARIO</label>
<br><br>
<span>Hora comienzo:</span>
<select name="sel" id="options1" required="required" class="option">
    <option value="">Seleccione</option>
    <option value="08:00:00">08:00:00</option>
    <option value="09:00:00">09:00:00</option>
    <option value="10:00:00">10:00:00</option>
    <option value="11:00:00">11:00:00</option>
    <option value="12:00:00">12:00:00</option>
</select>
&nbsp;
<span>Hora termino:</span>
<select name="sel2" id="options2" required="required" class="option2">
    <option value="">Seleccione</option>
    <option value="09:00:00">09:00:00</option>
    <option value="10:00:00">10:00:00</option>
    <option value="11:00:00">11:00:00</option>
    <option value="12:00:00">12:00:00</option>
    <option value="13:00:00">13:00:00</option>
</select>
<br><br>
<input type="submit" value="ENVIAR" onclick="return ValidaFecha(event)" class="btn">
</div>
</form>

For this example, validate that the final chosen date is not less than the initial date. I just made it simpler, originally I have it this way:

<script type="text/javascript">

    function ValidaFecha(e){

    var fecha1 = new Date(desde.value);
    var fecha2 = new Date(hasta.value);

    if (fecha2 < fecha1) {

        $('#hasta').focus();

          $.alert({
            title: ''+'<nav style=" background: #478573; color:white; width: 15cm; height: 10mm; margin-top: -5mm; margin-left: -5mm; padding-top: 2.5mm;">&nbsp;&nbsp;¡Atención!</nav>',
            content: ''+' <p style= "color: black; font-weight: 500;" >La fecha de término no puede ser menor que la fecha inicial.</p>',

        });

        return false;
      }
      else{
        return true;
      }
    }
</script>

I would like to know how I can show the date, I know it can be if I concatenate variables, at the moment I did it this way:

<script type="text/javascript">

    function ValidaFecha(e){

      var fecha1 = new Date(desde.value);
      var fecha2 = new Date(hasta.value);

      var hoy = new Date();
      var Anio = hoy.getFullYear();

      var months = ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"];

      var days = ["Lunes", "Martes", "Miercoles", "Jueves", "Viernes", "Sabado", "Domingo"];

      var Mes = months[hoy.getMonth()];
      var Dia = days[hoy.getDate()];
      var dia_n = hoy.getDate();

      if(fecha1 < hoy){

        $('#desde').focus();

          $.alert({
            title: ''+'<nav style=" background: #478573; color:white; width: 15cm; height: 10mm; margin-top: -5mm; margin-left: -5mm; padding-top: 2.5mm;">&nbsp;&nbsp;¡Atencion!</nav>',
            content: ''+' <p style= "color: black; font-weight: 500;" >La fecha de escogida no puede ser menor que la fecha actual.<br><br>Actualmente estamos a: </p>'+Dia+' '+dia_n+' '+'de'+' '+Mes+' '+'del'+' '+Anio,

        });

        return false;

      }
      else{
        return true;
      }
  }
</script>

But what I want is to appear inside the paragraph, inside the <p></p> tag in the content: because as I did it at the beginning it appears with a double spacing (no lo digo por los <br> ya que eso aplica dentro del <p> sin los <br> sigue el doble espacio); and without the style that I established for the paragraph, can it be achieved?

The other thing is that when the entered date is not less than the current one, even if you enter the current one, it does not pass the form, as if placing this if(fecha1 < hoy)... in the if this < sign will take it as if this were <= . How can the latter also be fixed?