1

Não tenho muito conhecimento com javascript e não estou sabendo como Como posso Abrir uma janela Modal se diferença entre duas datas for igual a X dias Exe.

  1. (Se ao clicar no campo e data escolhida tiver uma diferença de 1 dia da data atual abra modal1)

  2. (Se ao clicar no campo e data escolhida for anterior a data atual abra modal2)

Tenho esse script abaixo

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

2 Respostas 2

1

Você se refere ao campo input com o nome "start"? O evento abaixo vai rodar sempre que este campo for desselecionado (blur).

Além disto, uma dica: altere a formatação dele para o formato "2015-03-23" (sem os "00:00:00"), senão a data terá de ser tratada antes de ser passada para o construtor new 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');


});
2
  • Não está funcionando.. o modal não abre. alterei essa linha para: var data_input = new Date($(this).val()); //data do campo e o modal agora esta funcionando mais abre em qualquer data que escolha o que pode ser? Commented 21/03/2015 às 2:19
  • Faltou fechar o construtor, vou editar a resposta. Fico feliz por ter dado certo.
    – lfarroco
    Commented 21/03/2015 às 4:11
0

Fiz algumas alterações no código acima e cheguei a conclusão exata de como queria que o script funciona-se segue a baixo o Código alterado.

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .