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" />
<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>
<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;"> ¡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;"> ¡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?