Question

我是Angular的新手。我遇到的所有答案都使用jquery和javascript。几周前，我的团队要求我们只需要一个月的选择器。但是条件是我们不能从组织外部的任何地方外包组件。甚至没有bootstrap，material或primeng。因此，我决定使用HTML和CSS从头开始创建一个自定义的。这是屏幕截图： app-monthpicker是一个组件，在其顶部有一个父组件app-timeselector。拾月器工作正常。但是我无法实现突出显示所选月份范围的逻辑。 stackoverflow和其他网站上的所有解决方案都使用jquery或js。但是这里我们在谈论typescript。我创建了一个最小的stackblitz，下面是其中一个应答者创建的另一个stackblitz。有人可以在这方面帮助我。仅使用HTML和CSS和Typescript。我非常需要有人的帮助。我想要这个：

您可以看到从上一年开始的6个月，也可以看到从明年开始的所有月份。并且如果它们在范围内，则还需要突出显示。现在，我只需要2017年到2025年的时间。即使您现在对这些值进行硬编码，我也不介意。

PS：恐怕我的整个实现都不正确。请纠正我。

Answer 1

理想情况下，对于这种用例，您不应该重新发明轮子，也不要利用能够解决此问题的好的库。但是，如果您想使当前代码适用于该用例，则可以执行以下操作：

演示：https://angular-zedvjx.stackblitz.io

实现：https://stackblitz.com/edit/angular-zedvjx

高级：

我使用的方法是用一个大数字代表整个月份数组（monthsData），因为用例需要支持月份跨年度选择，这样更容易遍历。
然后每个月的视图只是对这个大数组的“切片”，所以
在年份之间切换就是在“视图”之间切换（在此处查看
是monthArray.slice（viewStart，viewFinish））
还引入了该范围的状态，以使其更容易跟踪。

更新：在此处写了一篇文章，文章的实施更简洁：https://medium.com/better-programming/month-range-picker-in-angular-8-4ce93ef7d76b

Answer 2

我会再说一遍。您有四个变量：lboundMonth，lboundYear，uboundMonth和uboundYear。

我认为您可以从2020年10月到2021年2月做类似的事

lbound:{year:2020,month:10,yearMonth:"202010"} //yearMonth it's the way yyyyMM
ubound:{year:2020,month:1,ueatMonth:"202101"}

Futhermore，您将创建一个带有月份的数组。正如@Sergey所说，我们可以创建一个数月的数组。但就我而言，我会以这种方式接受

{monthName: "january",month:1,monthYear:202001}

因此，当您更改年份

month=arr.map((x,index)=>{
   return {
     monthName:x,
     month:(index+1)
     monthYear:displayYear+('00'+(x+1)).slice(-2)
})

您只需要在loopmonthYear循环中比较lbound和ubound。像

<div *ngFor="let month of months>
<span [ngClass]="{'ubound':month.yearMonth==ubound.yearMonth,
                  'lbound':month.yearMonth==lbound.yearMonth,
                  'range':month.yearMonth>lbound.yearMonth && 
                          month.yearMonth<ubound.yearMonth
                 }"
       (click)="click(month)"
</div>

点击后进入

 click(month:any)
 {
    const my={
       year:this.displayYear
       month:month.month
       monthYear:month.monthYear
    }
    ..asing to lbound or tbound
    //you emit:
    this.ouputToparent({
        lbound:this.lbound,
        ubound:this.ubound,
     })
    //or
    this.ouputToparent({
        lbound:{year:this.lbound.year,month:this.lbound.month},
        ubound:{year:this.ubound.year,month:this.ubound.month},
     })
 }

如何突出显示选定的月份范围

2 个答案: