Open Modal window if difference between dates is equal to X days

Question

Open Modal window if difference between dates is equal to X days

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I'm not very knowledgeable with javascript and I'm not sure how How can I open a Modal window if the difference between two dates is equal to X days Exe.

(If clicking on the field and date chosen has a difference of 1 day from the current date open modal1)

(If clicking the field and date chosen is earlier than the current date open modal2)

I have this script below

<?
date_default_timezone_set('America/Sao_Paulo');
$data_atual = date('Y-m-d');
?>

<input type="datetime-local" name="start" value="2015-03-23 00:00:00"   />



<a href="#modal-simple1" data-toggle="modal" class="btn btn-primary">Abrir</a>


<!-- Modal 1 -->
<div class="modal fade" id="modal-simple1">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal heading -->
<div class="modal-header">
 button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;   
</button>
<h3 class="modal-title">Modal header</h3>
</div>
<div class="modal-body">
<p>
</p>
</div>
<div class="modal-footer"><input type="checkbox"   /><font color="black"> Li e aceito 
os termos para compra e uso do(s) serviço(s) acima citado(s).</font></h4>
<input type="submit" value="Confirmar Compra" class="btn btn-block btn-danger btn-
icon glyphicons home" />
</div>
</div>
</div>  
</div>
<!-- // Modal END -->

<a href="#modal-simple2" data-toggle="modal" class="btn btn-primary">Abrir</a>


<!-- Modal 2 -->
<div class="modal fade" id="modal-simple2">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal heading -->
<div class="modal-header">
 button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;   
</button>
<h3 class="modal-title">Modal header</h3>
</div>
<div class="modal-body">
<p>
</p>
</div>
<div class="modal-footer"><input type="checkbox"   /><font color="black"> Li e aceito 
os termos para compra e uso do(s) serviço(s) acima citado(s).</font></h4>
<input type="submit" value="Confirmar Compra" class="btn btn-block btn-danger btn-
icon glyphicons home" />
</div>
</div>
</div>  
</div>
<!-- // Modal END -->

php javascript html

asked by anonymous 20.03.2015 / 13:32

2 answers

0

I made some changes to the above code and came to the exact conclusion of how I wanted the script to work up below the changed code.

<input type="date"  name="start"  onblur="" />

<script>
$('input[name="start"]').blur(function(){

var data_atual = new Date(); //data atual
var data_input = new Date($(this).val()); //data do campo  (Linha Corrigida)
var diferenca_ms = Math.abs(data_input.getTime() - data_atual.getTime()); //diferença    
das datas em milisegundos
var diferenca_dias = Math.ceil(diferenca_ms / (1000 * 3600 * 24)); //milisegundos 
para dias

    if(diferenca_dias == 1) //se for diferença de um dia para mais ou menos... (Linha    
    //corrigida)
    $('#modal-login1').modal('show');

    else if(data_input < data_atual) // se data no input for menor que a atual...
    $('#modal-login2').modal('show');

    });
</script>

21.03.2015 / 03:36

Start function in a specific tag with pure JavaScript (gridalicious) Error while adding While value in List

score 1 · Accepted Answer

You refer to the input field with the name "start"? The event below will run whenever this field is deselected ( blur ).

In addition, a tip: change its formatting to the format "2015-03-23" (without the "00:00:00"), otherwise the date will have to be handled before being passed to the new constructor Date ():

$('input[name="start"]').blur(function(){

    var data_atual = new Date(); //data atual
    var data_input = new Date($(this)).val()); //data do campo
    var diferenca_ms = Math.abs(data_input.getTime() - data_atual.getTime()); //diferença das datas em milisegundos
    var diferenca_dias = Math.ceil(diferenca_ms / (1000 * 3600 * 24)); //milisegundos para dias

        if(diferenca_dias > 1 || diferenca_dias < 1) //se for diferença de um dia para mais ou menos...
        $('#modal1').modal('show');
    else if(data_input < data_atual) // se data no input for menor que a atual...
        $('#modal2').modal('show');


});