Calculate value according to selected dates

Posted on

Question :

I have to make a code that calculates Reais according to 2 dates informed. I have 2 inputs of type text to report a data in dd/mm/yyyy format. The A input is data inicial and the B is the data final . The user will inform on input A for example 05/20/2015 and input B will be 03/05/2015. The difference is then 13 days and I need to multiply by 10 (which would be the price in Reais), thus totaling R$ 130,00 Reais. I want to get to the next, the user informing the two dates the calculation is done automatic and displayed in a <div> . I do not have any code ready, but I’m having a hard time making this code.

    

Answer :

To calculate the days it looks like this:

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  
}

To calculate just do:

window.alert(qtdDias * 10);

Remembering that it is an alert for you to see the value of the calculation.

The example to update the DIV is this:

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

As you can see is an example that you will need to understand to mount it correctly but that is the basis.

    

You can use the MomentJS library to parse and check how many days have passed .

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>

The diff function provides a lot of difference information between dates. When used by sending the argument 'days' , the number of days passed between one date and another is returned.

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>

    

Leave a Reply

Your email address will not be published. Required fields are marked *