Increase installments with Jquery?

Navigation
2

I have a dynamic form and I made a function for somar 30 dias after the first expiration, but if I enter dates having the day 31 or day 01 you are doing the wrong calculation, for example: if entered 12/31/2017 as 1st expiration, in 3 installments should be thus 

1º 31/12/2017
2º 30/01/2018
3º 01/03/2018

But it's coming out like this: 

1º 31/01/2018
2º 31/01/2018
3º 31/03/2018

Below is a working example. 

$(function() {
  $('#form_forn').submit(function() {
    $('.table-result').show();
    $('#result-table tbody tr').remove();    
    var vencimento = $('#txtVencimento').val().split("/");
    var qtde_parcelas = $('#txtParcelas').val();
    var x = 1;
    var acc_vlr_total = 0;
    var acc_vlr_pop = 0;

    vencimento = new Date(vencimento[2] + "/" + vencimento[1] + "/" + vencimento[0]);
    var data_sum = 1;

    while (x <= qtde_parcelas) {
      var data = adicionarDiasData(data_sum, vencimento);
        $('#result-table tbody').append("<tr id=\"row_nf-" + x + "\" class=\"nf\"><td>" + x + " de " + qtde_parcelas + "</td><td title=\"vencimento\" class=\"text-center\">" + data + "</td></tr>");
      x++;
      data_sum += 30;
    }
    return false;
  });
});

function adicionarDiasData(dias, primeiro_ven) {
  //var hoje = new Date();
  var dia = new Date(primeiro_ven.getTime());
  var dataVenc = new Date(primeiro_ven.getTime() + (dias * 24 * 60 * 60 * 1000));
  return dia.getDate() + "/" + ("0" + (dataVenc.getMonth() + 1)).slice(-2) + "/" + dataVenc.getFullYear();
  //console.log(dia.getDate() + "/" + ("0" + (dataVenc.getMonth() + 1)).slice(-2) + "/" + dataVenc.getFullYear());
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><formid="form_forn" class="form-horizontal" name="novolancamento" method="post" action="#" autocomplete="off">
  <fieldset>
    <legend>Cadastrar novo lançamento Fornecedor</legend>
    <div class="container">
      <div class="row">

        <!-- Text input-->
        <div class="form-group">
          <label class="col-md-4 control-label" for="txtVencimento">1º Vencimento:</label>
          <div class="col-md-8">
            <input id="txtVencimento" name="txtVencimento" type="date" class="form-control input-md" required="">

          </div>
        </div>

        <!-- Text input-->
        <div class="form-group">
          <label class="col-md-4 control-label" for="txtParcelas">Quantidade parcelas:</label>
          <div class="col-md-8">
            <input id="txtParcelas" name="txtParcelas" type="number" placeholder="" class="form-control input-md" title="Valor compreendido entre 1 e 12" required="" maxlength="2" min="1" max="12">

          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-offset-8 col-md-4">
          <!-- Button (Double) -->
          <div class="form-group">

            <div class="col-md-12">
              <button type="submit" id="btnSalvar" name="btnSalvar" class="btn btn-warning pull-right">Simular lançamento</button>
            </div>
          </div>
        </div>
      </div>
  </fieldset>
</form>
<hr class="hr">
<br/>
<div class="table-result" style="display: none;">
  <table id="result-table" class="table table-hover table-condensed">
    <thead>
      <tr>
        <th>Parcela</th>
        <th class="text-center">Vencimento</th>
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>
  <br>
  <hr>
  <button class="btn btn-success" style="float:right; margin-right: 6%;" id="salvar_lancamento">Salvar</button>
  <br>
  <br>
    
asked by anonymous 22.12.2017 / 14:33

1 answer

3

You can make the sum of days using the getDate setDate object Date

That way. 

var date = new Date(); // Captura a data de hoje: 22/12/2017
var dayOfMonth = date.getDate() //Captura o dia do mês
date.setDate( dayOfMonth + 30 ); //Soma 30 dias.

console.log(date); //Output: 21/01/2017


$(function() {
  $('#form_forn').submit(function() {
    $('.table-result').show();
    $('#result-table tbody tr').remove();
    var qtde_parcelas = $('#txtParcelas').val();
    
    /* Capture o tempo em milissegundos desde 01/01/1970 */
    var time = Date.parse($('#txtVencimento').val().split("-"));
    
    /* Instancia o objeto Date e define a data em milissegundos */
    vencimento = new Date();
    vencimento.setTime(time);

    for (i = 1; i <= qtde_parcelas; i++) {
      var data = vencimento;
      
        $('#result-table tbody').append("<tr id=\"row_nf-" + i + "\" class=\"nf\"><td>" + i + " de " + qtde_parcelas + "</td><td title=\"vencimento\" class=\"text-center\">" + data.toLocaleString("pt-BR") + "</td></tr>");
        
      /* Captura o dia do mês e soma mais 30 dias */
      vencimento.setDate( data.getDate() + 30);
      
    }
    
    return false;
  });
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><formid="form_forn" class="form-horizontal" name="novolancamento" method="post" action="#" autocomplete="off">
  <fieldset>
    <legend>Cadastrar novo lançamento Fornecedor</legend>
    <div class="container">
      <div class="row">

        <!-- Text input-->
        <div class="form-group">
          <label class="col-md-4 control-label" for="txtVencimento">1º Vencimento:</label>
          <div class="col-md-8">
            <input id="txtVencimento" name="txtVencimento" type="date" class="form-control input-md" required="">

          </div>
        </div>

        <!-- Text input-->
        <div class="form-group">
          <label class="col-md-4 control-label" for="txtParcelas">Quantidade parcelas:</label>
          <div class="col-md-8">
            <input id="txtParcelas" name="txtParcelas" type="number" placeholder="" class="form-control input-md" title="Valor compreendido entre 1 e 12" required="" maxlength="2" min="1" max="12">

          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-offset-8 col-md-4">
          <!-- Button (Double) -->
          <div class="form-group">

            <div class="col-md-12">
              <button type="submit" id="btnSalvar" name="btnSalvar" class="btn btn-warning pull-right">Simular lançamento</button>
            </div>
          </div>
        </div>
      </div>
  </fieldset>
</form>
<hr class="hr">
<br/>
<div class="table-result" style="display: none;">
  <table id="result-table" class="table table-hover table-condensed">
    <thead>
      <tr>
        <th>Parcela</th>
        <th class="text-center">Vencimento</th>
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>
  <br>
  <hr>
  <button class="btn btn-success" style="float:right; margin-right: 6%;" id="salvar_lancamento">Salvar</button>
  <br>
  <br>
    
22.12.2017 / 18:35
How do I activate a div with JavaScript? How to call class method in another app?