Eu tenho que fazer um código que faz o calculo de Reais
de acordo com 2 datas informadas. Tenho 2 inputs
do tipo text
para informar uma data
no formato dd/mm/yyyy
. O input A é da data inicial
e o B é a data final
. O usuário irá informar no input A por exemplo 20/05/2015 e no input B irá ser 03/05/2015. A diferença então são 13 dias e preciso multiplicar por 10
(que seria o preço em Reais), assim totalizando R$ 130,00
Reais. Quero chegar no seguinte, ao usuário informar as duas datas o calculo é feito automático e exibido em uma <div>
. Não tenho nenhum código pronto, mas estou com extrema dificuldade em fazer esse código.
2 Respostas
Para calcular os dias é assim:
function diferencaEntreDias(dataIni, dataFim){//recebe a data no formato MM/dd/yyyy
var ONE_DAY = 1000 * 60 * 60 * 24;//Variável que representa um dia em milissegundos
var date_ini_ms = new Date(dataIni).getTime();//variável que representa a data incial em ms
var date_fim_ms = new Date(dataFim).getTime();//variável que representa a data final em ms
var diferenca = date_fim_ms - date_ini_ms;//diferenca, em ms, entre as datas
return Math.round(diferenca/ONE_DAY);//diferenca, em dias, entre as datas
}
Para calcular é só fazer:
window.alert(qtdDias * 10);
lembrando que é um alert pra você ver o valor do calculo.
O exemplo para atualizar a DIV é esse:
<!DOCTYPE html>
<html>
<head>
<title>teste</title>
<meta charset="UTF-8" />
<script type="text/javascript">
function gravar(){
var titulo = document.getElementById("txtTitulo").value;
var subtitulo = document.getElementById("txtSubtitulo").value;
var div = document.getElementById("divResultado");
div.innerHTML = "<h1>" + titulo +"</h1>"+ "\n" + subtitulo;
}
</script>
</head>
<body>
<div>
<label>Título:</label>
<input type="text" id="txtTitulo"/>
<label>Subtítulo:</label>
<input type="text" id="txtSubtitulo"/>
<button id="btnEnviar" onclick="diferencaEntreDias(passeAsDatasAqui)" >Gravar</button>
</div>
<div id="divResultado">
</div>
</body>
</html>
Como você pode ver é um exemplo que você vai precisar entender pra montar ele corretamente mas essa é a base.
Pode utilizar a biblioteca MomentJS para fazer o parse e verificar quantos dias passaram.
var inicial = moment('1/02/2015', 'DD/MM/YYYY'),
final = moment('14/02/2015', 'DD/MM/YYYY'),
diasPassados = final.diff(inicial, 'days');
alert('Dias passados: ' + diasPassados); // Dias passados: 13
alert('Valor do frete: R$' + (diasPassados * 10) + ',00'); // Valor do frete: R$130,00
<script src='http://momentjs.com/downloads/moment.min.js'></script>
A função diff
fornece diversas informações de diferenças entre datas. Quando utilizada enviando o argumento 'days'
, é retornado a quantidade de dias passados entre uma data e outra.
function byId(el) {
return document.getElementById(el)
};
function isNullOrEmpty(el) {
return el.value == null || el.value == '';
}
var $inicial = byId('inicial'),
$final = byId('final'),
$frete = byId('frete'),
$calcular = byId('calcular');
$calcular.addEventListener('click', function() {
var valorFrete = '00';
if (!isNullOrEmpty($inicial) && !isNullOrEmpty($final)) {
var inicial = moment($inicial.value, 'DD/MM/YYYY'),
final = moment($final.value, 'DD/MM/YYYY');
// isValid é uma função da própria biblioteca MomentJS
// para verificar se uma data é válida.
if (inicial.isValid() && final.isValid())
valorFrete = final.diff(inicial, 'days') * 10;
}
$frete.innerHTML = 'R$' + valorFrete + ',00';
});
<script src='http://momentjs.com/downloads/moment.min.js'></script>
<label for='inicial'>Data Inicial</label>
<input id='inicial' type='text' placeholder='10/02/2015' />
<label for='final'>Data Final</label>
<input id='final' type='text' placeholder='10/02/2015' />
<button id='calcular'>Calcular</button>
<p id='frete'></p>
-
Opa, obrigado já é meio caminho andado. Mas ainda falta uma coisa que eu acho que para mim será a mais díficil, que é a questão de só calcular quando o usuário preencher os dois campos de data A e B, como poderia fazer isso ? Está sendo o mais díficil agora 19/05/2015 às 20:32
-