javascript - 如何在Angular中创建月份范围选择器(How to create a month range picker in Angular)

Question

I came across many similar questions on stackoverflow.

(我在stackoverflow上遇到了许多类似的问题。)

But trust me I implement at least ten solutions but I'm not getting correct results and also that most of them are using jquery or javascript while I've to use typescript .

(但是相信我，我至少实现了十个解决方案，但是我没有得到正确的结果，而且大多数情况下我都必须使用typescript时使用jquery或javascript 。)

I'm creating a simple month range picker with no other rocket science features.

(我正在创建一个没有其他火箭科学功能的简单月份范围选择器。)

After implementing one solution after the other my actual code has become very dirty.

(在实现一个解决方案之后，我的实际代码变得非常脏。)

So I'm creating a fresh minimal project on stackblitz, here .

(所以我创建的stackblitz一个新的项目极少， 在这里 。)

Also I'm giving my code before making any changes.

(我还要在进行任何更改之前给出我的代码。)

My monthpicker.component.html :

(我monthpicker.component.html ：)

<div class="dropdown">
  <span>
    <input  placeholder="{{sampletext}}, {{inputText}}">
  </span>
  <div class="my-table-div dropdown-content">
    <div class="year-div">
      <input type="number" value="2018" min="2018" max="2024" [(ngModel)]="inputText">
    </div>
    <hr>
    <div *ngFor="let row of matrix" class="my-table">
      <span *ngFor="let x of row">
        <span class="month-name" (click)="onClick(x)">{{ x }}</span>
      </span>
    </div>
  </div>
</div>

monthpicker.component.ts

(monthpicker.component.ts)

import ...;

@Component({
  ...
})
export class MonthpickerComponent implements OnInit {
  dt = new Date( );
  arr = [
    'Jan', 'Feb', 'Mar', 'Apr',
    'May', 'Jun', 'Jul', 'Aug',
    'Sep', 'Oct', 'Nov', 'Dec'
  ];

  sampletext = ""+this.arr[this.dt.getMonth()];
  inputText :number = this.dt.getFullYear();
  clickCount: number=0;

  n = 4;
  matrix = Array
    .from({ length: Math.ceil(this.arr.length / this.n) }, (_, i) => i)
    .map(i => this.arr.slice(i * this.n, i * this.n + this.n));

  constructor() { }

  onClick(x) {
    this.clickCount++;
    console.log("Month: " + x);
    this.sampletext = x;
    console.log("Year: " + this.inputText);
    console.log("Clicked "+this.clickCount +" times.");
    if(this.clickCount%2==0) {
      this.sampletext+=" " +this.sampletext+", "+this.inputText;
    }
  }

  ngOnInit() {
  }
}

Please suggest a solution.

(请提出解决方案。)

PS: I don't want to use any third party library.

(PS：我不想使用任何第三方库。)

Not even bootstrap.

(甚至没有启动。)

I've to make it from the scratch.

(我必须从头开始。)

  ask by Tanzeel translate from so

Answer 1

I tried one more solution of my own.

(我尝试了自己的另一种解决方案。)

The trick is clickCount is even or odd.

(诀窍是clickCount是偶数还是奇数。)

Here are some important changes in the code.

(这是代码中的一些重要更改。)

monthpicker.component.html

(monthpicker.component.html)

<div class="dropdown">
  <span>
    <input  placeholder="{{sampletext}}, {{inputText}} -> {{newmonth}} {{newyear}}">
  </span>
    <div class="my-table-div dropdown-content">
      NO CHANGES
    </div>
</div>

monthpicker.component.ts

(monthpicker.component.ts)

import ...;

@Component({
  ...
})
export class MonthpickerComponent implements OnInit {
  ...

  sampletext = ""+this.arr[this.dt.getMonth()];
  inputText :any = this.dt.getFullYear();

  newmonth = ""+this.arr[this.dt.getMonth()];
  newyear :any = this.dt.getFullYear();

  clickCount: number =0;

  ...

  constructor() { }

  onClick(x) {
    this.clickCount++;
    console.log("Month: " + x);
    if(this.clickCount%2!=0) {
      this.sampletext = x;
    }
    console.log("Year: " + this.inputText);
    console.log("Clicked "+this.clickCount +" times.");
    if(this.clickCount%2==0) {
      this.newmonth=" "+x;
    }
  }

  ngOnInit() {
  }
}

Changelog

(变更日志)

1. In HTML code I've added two new properties in input field: newmonth and newyear

   (在HTML代码中，我在输入字段中添加了两个新属性： newmonth和newyear)

2. Lets bind these two properties in typescript.

   (让我们在打字稿中绑定这两个属性。)

3. Two new variables are declared in typescript:

   (在打字稿中声明了两个新变量：)

newmonth = ""+this.arr[this.dt.getMonth()]; and

(和)

newyear :any = this.dt.getFullYear();

4. In onclick method check if clickCount is even or odd using %2==0 and set their new values accordingly.

   (在onclick方法中，使用%2==0检查clickCount是偶数还是奇数，并相应地设置其新值。)