How to get Current 3 months based on this month dynamically in javascript?

Viewed 79

JSON

[
  {
    "title": "Formula1",
    "month": "2020-03",
    "recieved_qty": 1020
  },
  {
    "title": "NewFormula",
    "month": "2020-03",
    "recieved_qty": 10
  }
]

Html: Here Months are hardcoded. Instead I need to dynamic month names based on current month. For Example => this month is March, should get March, April and May in a row dynamically. can you help me to do this?

<div class="d-flex flex-row">
  <div style="font-size: 12px">Forecasted Product</div>
  <div style="margin-left: 15%;">Jan 2020</div>
  <div style="margin-left: 15%;">Feb 2020</div>
  <div style="margin-left: 15%;">Mar 2020</div>
</div>
<div formArrayName="schedularList" *ngFor="let item of schedulerArray.controls; let i = index;">
  <div [formGroupName]="i" class="add-div">
    <div class="d-flex flex-row" style="width:160px">
      <mat-form-field>
        <mat-select placeholder="Formulation" formControlName="formulation">
          <mat-option *ngFor="let item of formulationList" [value]="item.title"> {{item.title}} </mat-option>
        </mat-select>
      </mat-form-field>
      <mat-form-field>
        <input matInput formControlName="quantity1" placeholder="Quantity">
      </mat-form-field>
      <mat-form-field>
        <input matInput formControlName="quantity2" placeholder="Quantity">
      </mat-form-field>
      <mat-form-field>
        <input matInput formControlName="quantity3" placeholder="Quantity">
      </mat-form-field>
    </div>
  </div>
</div>
<div class="add-div" (click)="addItem()">
  <span>Add Product for Forecast +</span>
  <!-- <i class="material-icons" >add_circle_outline</i> -->
</div>

component.ts: This.formulationList will get JSON given above

I need to get 3 months based on current month dynamically. Then I need to match the month and patch the value of quantities declared in schedulerList formarray.

getRpsbasedOnMonth() {
  const payload = {
    company_id: this.userService.getUserdetails().CompanyUser.company_id.id
  }
  this.store.dispatch(new GetRPsBasedOnMonth(payload))
  this.store.pipe(select(getRpsBasedOnMonthSuccess)).subscribe((result: any) => {
    if (!!result) {
      console.log(result)
      this.formulationList = result.map(item => {
        item.month = item.month.substring(5, 8)
        return item
      })
      console.log(this.formulationList)

    }
  })
  this.store.pipe(select(getRpsBasedOnMonthError)).subscribe((result: any) => {
    if (!!result) {
      console.log(result)
      alert(result.error)
    }
  })
}
1 Answers

You just need JS date manipulation?

const result = [{
    "title": "Formula1",
    "month": "2020-03",
    "recieved_qty": 1020
  },
  {
    "title": "NewFormula",
    "month": "2020-03",
    "recieved_qty": 10
  }
]
const [ year, month ] = result[0].month.split('-');

const date = new Date(year, month - 1, 1, 0, 0, 0);

const divs = document.querySelectorAll("#forecast>div:not(:first-child)");
for (let div of divs) {
  div.textContent = `${date.toLocaleString('default', { month: 'short' })} 
                     ${date.getFullYear()}`
  date.setMonth(date.getMonth() + 1)
} 
<div id="forecast">
  <div>Forecasted Product</div>
  <div style="margin-left: 15%;"></div>
  <div style="margin-left: 15%;"></div>
  <div style="margin-left: 15%;"></div>
</div>

Related