0

Este es el sitio desde el cual ocupo los alerts personalizados: https://craftpip.github.io/jquery-confirm/

Tengo un alert personalizado el cual me muestra un mensaje cada vez que alguna condición no se cumpla.

Este es el código:

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>

Para este ejemplo me valida que la fecha escogida final no sea menor que la fecha inicial. Solo que lo hice más simple, originalmente lo tengo de esta manera:

<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>

Quisiera saber como puedo mostrar la fecha, sé que se puede si concateno variables, de momento lo hice de esta manera:

<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>

Pero lo que quiero es que aparezca dentro del párrafo, dentro de la etiqueta <p></p> en el content: porque como lo hice en un principio me aparece con un doble espaciado (no lo digo por los <br> ya que eso aplica dentro del <p> sin los <br> sigue el doble espacio); y sin el estilo que le establecí al párrafo, ¿Se puede lograr?

Lo otro es que cuando valido que la fecha ingresada no sea menor que la actual, aunque ingrese la actual no pasa el formulario, como si al colocar esto if(fecha1 < hoy)... en el if este signo < lo tomara como si fuese esto <=. ¿Como se puede arreglar también esto último?

2 respuestas 2

2

Colega, tu error es simplemente que estas cerrando el tag <p> y DESPUÉS muestras la fecha actual... sólo debes cambiar esto

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,

por esto

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: ${Dia} ${dia_n} de ${Mes} del ${Anio}</p>'

Nos comentas :)

PD: Como consejo, te sugiero fuertemente utilizar la librería MomentJS, la cual maneja fechas de una manera extraordinariamente fácil (incluidas validaciones que podrías necesitar)

2
  • Ya veo era eso, había que jugar con las comillas. Lo probé y funciona.Gracias colega.
    – M4uriXD
    el 4 dic. 2018 a las 16:07
  • Si quieres puedes crear otra pregunta con el problema y como comunidad te ayudamos a resolverlo :) el 7 dic. 2018 a las 13:24
0

Puedes utilizar plantillas de cadena de texto(template string)

Por ejemplo si yo tengo un texto y necesito a ese texto concatenar una variable.

let name = "Test"
let text = `Hola ${name}`
console.log(text)

En tu caso seria algo parecido a esto.

let Dia = "Martes"
let dia_n = 11
let Mes = "Noviembre"
let Anio = 2018

let 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: ${Dia} ${dia_n} de ${Mes} del  ${Anio}</p>`

console.log(content)

Respecto a los estilos el color negro del párrafo ya lo tiene por defecto.

2
  • Amigo, luego de revisarlo, lo adapte a mi codigo, pero no funciona en el cuerpo del alert muestra esto: ...estamos a: ${Anio} cuando debería mostrar 2018
    – M4uriXD
    el 4 dic. 2018 a las 16:01
  • Mira Aqui y comprueba que este bien
    – MitaCloud
    el 4 dic. 2018 a las 16:05

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.