Increase Ionic 3, Angular, Typescript

0

I'd like to know how to increase the expiration date of a purchase. Example: the person made a purchase, and placed the due date for the 30th of March, so the date of the second installment would be April 29th. Follow the function and the HTML code.

<ion-card *ngFor="let p of parcelasCobranca; let i = index">
  Parcela
  <ion-item>
    <ion-label stacked>Valor: {{ valorParcela }}</ion-label>
  </ion-item>
  <ion-item>
    <ion-label stacked>Data de vencimento *</ion-label>
    <ion-input type="date"  formControlName="due_date" name="due_date" id="due_date"></ion-input>
  </ion-item>
  <ion-item *ngIf="due_date.hasError('required') && due_date.touched">
    <p>Digite a data *</p>
  </ion-item>
</ion-card>
parcelas() {
  this.parcelasCobranca = [];
  this.valorParcela = this.amount / this.quantidadeParcelas;
  for (let i = 0; i < this.quantidadeParcelas; i++) {
     this.parcelasCobranca.push({
       due_date:this.due_date.value,
       value: this.valorParcela,
     });
   }

   console.log(this.parcelasCobranca)
 }

Update 1 - follow the other code I made, the due date is going back a few days.

parcelas() {

  this.parcelasCobranca = [];
  this.valorParcela = this.amount / this.quantidadeParcelas;
  let someDate = new Date(this.due_date.value);

  for (let i = 0; i < this.quantidadeParcelas; i++) {

    someDate.setDate(someDate.getDate() + 30);


    let dd = someDate.getDate();
    let mm = someDate.getMonth();
    let y = someDate.getFullYear();

    let someFormattedDate = dd + '-' + mm + '-' + y;

    this.parcelasCobranca.push({

      due_date: someFormattedDate,
      value: this.valorParcela,

    });
  }

  console.log(this.parcelasCobranca)
}
<ion-grid [hidden]="!value">
  <ion-card *ngFor="let p of parcelasCobranca; let i = index">
    Parcela
    <ion-item>
      <ion-label stacked>Valor: {{ valorParcela }}</ion-label>
    </ion-item>
    <ion-item>
      <ion-label stacked>Data de vencimento *</ion-label>
      <ion-input type="date"  formControlName="due_date" name="due_date" id="due_date"></ion-input>
    </ion-item>
    <ion-item *ngIf="due_date.hasError('required') && due_date.touched">
      <p>Digite a data *</p>
    </ion-item>
  </ion-card>
</ion-grid>
    
asked by anonymous 27.03.2018 / 17:06

1 answer

2

I recommend using the Moment.js library in your parcelas() method to create a variable:

let data = moment(this.due_date.value);

No for leave like this:

parcelasCobranca.push({
  value: this.valorParcela,
  due_date: moment(data).format('L'),
});
// A cada loop adiciona 30 dias em data
data = moment(data).add(30, 'days');

Example running:

let amount = 2000;
let parcelasCobranca;

let quantidadeParcelas = document.querySelector('#quantidadeParcelas');
let due_date = document.querySelector('#due_date');

function parcelas() {
  parcelasCobranca = [];
  let parcelas = parseInt(quantidadeParcelas.value);
  let valorParcela = amount / parcelas;
  let data = moment(due_date.value);
  for (let i = 0; i < parcelas; i++) {
    parcelasCobranca.push({
      value: valorParcela,
      due_date: moment(data).format('L')
    });
    // A cada loop adiciona 30 dias em data
    data = moment(data).add(30, 'days');
  }
  console.log(parcelasCobranca);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/locale/pt-br.js"></script>
Parcelas: <input type="number" id="quantidadeParcelas" value="1" min="1" />
<input type="date" id="due_date" />
<button id="gerarParcelas" onclick="parcelas()">Parcelas</button>
    
27.03.2018 / 17:43