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

Asked

Viewed 172 times

1

I don’t have much knowledge with javascript and I don’t know how How can I Open a Modal window if difference between two dates is equal to X days Exe.

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

  2. (If clicking on the chosen field and date 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

2 answers

1


Do you refer to the input field named "start"? The event below will run whenever this field is deselected (Blur).

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

$('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');


});

  • It is not working.. The modal does not open. I changed this line to: var data_input = new Date($(this).val()); //field date and the modal now working longer opens at any date that chooses what may be?

  • Missed closing the constructor, I’ll edit the answer. I’m glad it worked.

0

I made some changes to the above code and came to the exact conclusion of how I wanted the script to work follows 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>

Browser other questions tagged php javascript html

You are not signed in. Login or sign up in order to post.