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

我是新手。我得到的所有答案都使用jquery和javascript。几周前，我的团队要求我们只需要一个月的挑选员。但条件是我们不能从组织之外的任何地方外包组件。甚至连引导、材料或底漆都没有。所以我决定使用HTML和CSS从头开始创建一个自定义的。以下是截图： app monthpicker是一个组件，其上有一个父组件app timeselector。 monthpicker工作得很好。但我无法实现突出显示所选月份范围的逻辑。stackoverflow和其他网站上的所有解决方案都使用jquery或js。但这里我们说的是打字稿。我已经创建了一个极小值，这里还有一个由回答者创建的极小值。有人能在这方面帮助我吗。仅适用于HTML、CSS和Typescript。我这里急需别人的帮助。我想要这个：

您可以看到上一年的6个月以及下一年的所有月份。如果它们在范围内，也需要突出显示。现在，我只需要2017年到2025年。我不介意你现在硬编码这些值

---

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

理想情况下，对于这样的用例，您不应该重新发明轮子并利用解决此问题的好库。但是，如果您想使当前代码适用于该用例，可以这样做：

演示：

实施：

在高级别：

我使用的方法是，总月份由一个大的 数组月份数据，因为用例需要支持月份 跨年份选择，这样更容易迭代

那么每个月视图只是这个大数组的一部分，所以 在年份之间切换就是在视图之间切换 是monthArray.sliceviewStart，viewFinish

还为该范围引入了状态，以便更轻松地跟踪它

---

更新：在这里写了一篇关于cleaner实现的文章：

理想情况下，对于这样的用例，您不应该重新发明轮子并利用一个好的库来解决这个问题。但是，如果您想使当前代码适用于该用例，可以这样做：

演示：

实施：

在高级别：

我使用的方法是，总月份由一个大的 数组月份数据，因为用例需要支持月份 跨年份选择，这样更容易迭代

那么每个月视图只是这个大数组的一部分，所以 在年份之间切换就是在视图之间切换 是monthArray.sliceviewStart，viewFinish

还为该范围引入了状态，以便更轻松地跟踪它

---

更新：在这里写了一篇关于cleaner实现的文章：

我再看一次。您有四个变量：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"}

此外，您还可以使用月份创建一个数组。正如@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)
})

您只需要在循环中比较monthYear与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>

---

我再来一杯。您有四个变量：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"}

此外，您还可以使用月份创建一个数组。正如@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)
})

您只需要在循环中比较monthYear与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>

---

您的演示不正确working@Amit. 对不起，先生。我在做一些改变。现在修好了。请查收。@Amit。我已经完成了所有的工作，除了范围突出显示。我无法朝那个方向思考。OPs想突出显示两个选定月份之间的元素。让我看看我能提供什么帮助。今天我会为你的闪电战做准备，试着做点什么；您的演示不正确working@Amit. 对不起，先生。我在做一些改变。现在修好了。请查收。@Amit。我已经完成了所有的工作，除了范围突出显示。我无法朝那个方向思考。OPs想突出显示两个选定月份之间的元素。让我看看我能提供什么帮助。今天我会为你的闪电战做准备，试着做点什么；这太棒了。很抱歉你不得不经历这些。你说得对，我们正在重新发明轮子。但我不能挑战我的队长的决定。我试着说服你，最后一个请求，谢尔盖。我希望这一亮点也能延伸到明年。就像我选择了2019年2月到2020年8月。那么一年中的两个月都应该突出显示。希望我能解释清楚。我也不介意为了赏金而打开这个问题。我很高兴

---

我在问题中添加了一个要求的截图。现在可能是2018年到2025年。但稍后我也会将其外部化。我主要关心的是愚蠢的范围选择突出的事情-你能测试一下吗？我可以做视觉方面的工作，但这取决于你在选择后如何使用数据，我希望你能做剩下的工作，你所需要的只是处理月数组。这太棒了。很抱歉你不得不经历这些。你说得对，我们正在重新发明轮子。但我不能挑战我的队长的决定。我试着说服你，最后一个请求，谢尔盖。我希望这一亮点也能延伸到明年。就像我选择了2019年2月到2020年8月。那么一年中的两个月都应该突出显示。希望我能解释清楚。我也不介意为悬赏问题打开这个问题。我在问题中添加了一个要求的屏幕截图。现在可能是2018年到2025年。但稍后我也会将其外部化。我主要关心的是愚蠢的范围选择突出的事情-你能测试一下吗？我可以做视觉方面的工作，但取决于您在选择后使用数据的方式，我希望您可以做其余的工作，您所需要的只是处理months数组。我很欣赏这些改进，但您可以对突出显示样式做些什么吗。这是我的主要问题。谢谢：-我很感激这些改进，但你们能做一些突出的造型。这是我的主要问题。谢谢:-