时间戳

首页 > 解决方案 > 如何在javascript中根据本月动态获取当前3个月？

javascript - 如何在javascript中根据本月动态获取当前3个月？

问题描述

JSON

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

Html：这里的月份是硬编码的。相反，我需要根据当前月份动态月份名称。例如 => 这个月是三月，应该动态获取三月、四月和五月。你能帮我做这件事吗？

<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 将得到上面给出的 JSON

我需要根据当前月份动态获得 3 个月。然后我需要匹配月份并修补在 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)
    }
  })
}

标签： javascriptangular

解决方案

你只需要 JS 日期操作？

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>

推荐阅读