How to highlight a range of selected months - html

Question

I'm new to Angular. All the answers that i came accross are using jquery and javascript. Few weeks ago there was a requirement in my team that we need a month only picker. But the condition is that we cannot outsource the component from anywhere outside the organization. Not even bootstrap, material or primeng. So I decided to create a custom one from the scratch using HTML and CSS. Here is the screenshot:
app-monthpicker is a component and on top of it there is a parent component app-timeselector.
The monthpicker is working perfectly. But I'm not able to implement the logic for highlighting the selected range of months. All the solutions on stackoverflow and other websites are using jquery or js. But here We're talking typescript. I've created a minimal stackblitz and here is one more stackblitz created by one of the answerer. Can someone help me in this regard please. With HTML and CSS and Typescript only. I badly need someones help here. I want this:
You can see 6 months from the previous year and all the months from next year also. And they also need to be highlighted if they're in range. For now I need this for 2017 to 2025 only. I don't mind even if you hard-code these values for now.
PS: I'm afraid that my whole implementation is incorrect. Please correct me.

Answer 1

Ideally, for such a use case you should not re-invent the wheel and leverage a good library that solved this problem. But if you want to make your current code works for the use case here is what can be done:
demo: https://angular-zedvjx.stackblitz.io
implementation: https://stackblitz.com/edit/angular-zedvjx
At high level:
I used approach where overall months are represented by one large
Array (monthsData) since the use case needs to support months
selection across years and this way it is easier to iterate over it.
Then each month view is just a "slice" into this big array, so
switching between years is switching between the "views" (view here
is monthArray.slice(viewStart, viewFinish) )
Also introduced state for the range to keep track of it easier.
Update: wrote an article with cleaner implementation here: https://medium.com/better-programming/month-range-picker-in-angular-8-4ce93ef7d76b

Answer 2

I'll take another aproach. You has four variables:lboundMonth,lboundYear,uboundMonth and uboundYear.
I think that you can has some like, I put and example from october 2020 to febrary 2021
lbound:{year:2020,month:10,yearMonth:"202010"} //yearMonth it's the way yyyyMM
ubound:{year:2020,month:1,ueatMonth:"202101"}
Futhermore, you create an array with the month. As #Sergey say, we can create an array of months. But in my case, I'll take that was in the way
{monthName: "january",month:1,monthYear:202001}
So, when you change the year
month=arr.map((x,index)=>{
return {
monthName:x,
month:(index+1)
monthYear:displayYear+('00'+(x+1)).slice(-2)
})
You only need compare in the loop monthYear with lbound and ubound. Some like
<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>
When you click you has in
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},
})
}