4

Estou tendo dificuldade em montar um script, nao estou sabendo calcular interalo de datas com o javascript, estava pensando em fazer uma tela que calcula juros, mas que retorna os valores em tempo real nos inputs que estão disabled

segue código:

<fieldset>
   <legend>Calcular Juros</legend>

   <label>Data de Vencimento:</label>
   <input id="datavenc" type="date"/><br />

   <label>Data de Pagamento: </label>
   <input id="datapag" type="date"/><br />

   <label>Valor do Titulo: </label>
   <input id="valortitulo" type="text"/><br />

   <label>Outras Despesas: </label>
   <input id="despesas" type="text"/><br /><br />

   <label>Dias em Atraso: </label>
   <input id="diasematraso" type="text" disabled/><br />

   <label>Juros: </label>
   <input id="juros" type="text" disabled/><br />

   <label>Valor Total a Pagar: </label>
   <input id="valortotal" type="text" disabled/><br />
</fieldset>

Por exemplo,
data de vencimento = 01/09/2017
data de pagamento = 30/09/2017
valor do título = 2000
outras despesas = 100

dias em atraso = 29
juros = 96,67
valor total a pagar= 2.196,67

Dias em atraso = data de vencimento - data de pagamento
Juros = (valor do título * 5%)/30*dias em atraso
Outras despesas = despesas
Valor a pagar = valor do titulo + juros + despesas

2 Respostas 2

1

Solução que atualiza os valores automaticamente quando qualquer campo for alterado à medida que é preenchido em tempo real:

elementsArray = document.getElementsByTagName('input');
for(x=0;x<elementsArray.length;x++){
	elementsArray[x].addEventListener("input", function(){
		calcula();
	});
}

function calcula(){
	vencimento = document.getElementById("datavenc").value;
	pagamento = document.getElementById("datapag").value;

	if(document.getElementById("datavenc").type !== "date"){
		// para o Firefox que não suporta type="date"
		venc_array = vencimento.split("/");
		pagt_array = pagamento.split("/");
		vencimento = venc_array[2] + "-" + venc_array[1] + "-" + venc_array[0];
		pagamento = pagt_array[2] + "-" + pagt_array[1] + "-" + pagt_array[0];
	}

	d1 = new Date(vencimento);
	d2 = new Date(pagamento);

	dias_atraso = parseInt((d2 - d1) / (24 * 3600 * 1000));

	valortit = parseFloat(document.getElementById("valortitulo").value);
	outrasdesp = document.getElementById("despesas").value;
	outrasdesp = (outrasdesp == "") ? 0 : parseFloat(outrasdesp);

	juros = ((valortit * .05) / 30) * (dias_atraso);

	if (!isNaN(dias_atraso) && !isNaN(juros)) {
		document.getElementById("diasematraso").value = dias_atraso;
		document.getElementById("juros").value = juros.toFixed(2).replace(".", ",");
		document.getElementById("valortotal").value = (valortit + juros + outrasdesp).toFixed(2).replace(".", ",");
	}
}
<fieldset>
   <legend>Calcular Juros</legend>

   <label>Data de Vencimento:</label>
   <input id="datavenc" type="date"/><br />

   <label>Data de Pagamento: </label>
   <input id="datapag" type="date"/><br />

   <label>Valor do Titulo: </label>
   <input id="valortitulo" type="text"/><br />

   <label>Outras Despesas: </label>
   <input id="despesas" type="text"/><br /><br />

   <label>Dias em Atraso: </label>
   <input id="diasematraso" type="text" disabled/><br />

   <label>Juros: </label>
   <input id="juros" type="text" disabled/><br />

   <label>Valor Total a Pagar: </label>
   <input id="valortotal" type="text" disabled/><br />
</fieldset>

1

Os cálculos que indica são relativamente simples, basta ir guardando os valores em variáveis ou constantes e utilizando nas operações seguintes, uma vez que são encadeados.

No meu exemplo utilizei Array Destructuring para simplificar a busca dos elementos ao formulário através dos seus ids e Arrow Functions para o click, que pode trocar se estiver a trabalhar com navegadores antigos.

const [dataVenc, dataPag, valorTitulo, despesas, diasEmAtraso, juros, valorTotal, calcular] = 
document.querySelectorAll("#datavenc, #datapag, #valortitulo, #despesas, #diasematraso, #juros, #valortotal, #calcular");

calcular.addEventListener("click", () => {  

  const diasAtraso = (new Date(dataPag.value).getTime() - new Date(dataVenc.value).getTime()) / (1000 * 3600 * 24);
  
  const vTit = Number(valorTitulo.value);
  let jurosCalculados = 0;
  
  if (diasAtraso > 0){ //apenas calcula juros quando há dias em atraso
    diasEmAtraso.value = diasAtraso;
    jurosCalculados = (vTit * 0.05) / 30 * diasAtraso;
  }
  else { //se não tem dias em atraso os juros continuam a 0
    diasEmAtraso.value = 0;
  }
  
  juros.value = jurosCalculados.toFixed(2);
  valorTotal.value = (vTit + jurosCalculados + Number(despesas.value)).toFixed(2);
});
<form>
  <fieldset>
     <legend>Calcular Juros</legend>

     <label>Data de Vencimento:</label>
     <input id="datavenc" type="date"/><br />

     <label>Data de Pagamento: </label>
     <input id="datavenc" type="date"/><br />

     <label>Valor do Titulo: </label>
     <input id="valortitulo" type="text"/><br />

     <label>Outras Despesas: </label>
     <input id="despesas" type="text"/><br /><br />

     <label>Dias em Atraso: </label>
     <input id="diasematraso" type="text" disabled/><br />

     <label>Juros: </label>
     <input id="juros" type="text" disabled/><br />

     <label>Valor Total a Pagar: </label>
     <input id="valortotal" type="text" disabled/><br />
  </fieldset>
</form>
<button id="calcular">Calcular</button>

Apesar de não ter indicado, eu assumi que apenas eram calculados juros se a data de pagamento fosse superior à data de vencimento.

9
  • acho que deve haver alguma coisa errada nessas contas... hehe
    – viana
    30/09/2017 às 14:52
  • Em querySelectorAll você está repetindo datavenc duas vezes;
    – viana
    30/09/2017 às 14:54
  • @acklay Oops, obrigado lol, nem tinha reparado.
    – Isac
    30/09/2017 às 14:54
  • @acklay É faltava também o de calcular, mas também já coloquei. O resto parece me correto.
    – Isac
    30/09/2017 às 14:57
  • A data está invertida também. Pela lógica da pergunta, isso ai seria exatamente um calculo de juros de atraso. Geralmente a data do pagamento seria após o vencimento.
    – viana
    30/09/2017 às 14:57

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 .