Custom Navigation in a ngb Range date picker in Angular

I have a range datepicker which i am trying to clone and this is the link of datepicker which is used in a website: https://mengxiong10.github.io/vue2-datepicker/index.html#Range

[]

(https://i.sstatic.net/l2ydmV9F.png)

I want to use custom months and year navigation. which i created and implemented but the real problem is that my range datepicker screens are by default binded to each other and if i try to navigate one screen the other screen will also navigate. I want to change my days template of both screens separately based on my separate variables for FromDate and ToDate.

This is what i tried: ts logic code:

constructor(private calendar: NgbCalendar, private renderer: Renderer2, private backendService: BackendService, private http: HttpClient,) {

this.fromDate = this.calendar.getToday();
this.toDate = this.calendar.getNext(this.fromDate, 'd', 8);
this.updateInputValue();
const today = this.calendar.getToday();
this.fromYear = today.year;
this.fromMonth = today.month;
this.toYear = today.year;
this.toMonth = today.month + 1 > 12 ? 1 : today.month + 1;
this.startDate = { year: today.year, month: today.month, day: today.day };
this.maxDate = {
year: this.fromYear,
month: this.fromMonth,
day: today.day
};
}

prevMonth(range: 'from' | 'to') {
if (range === 'from') {
this.fromMonth=this.fromMonth === 1 ? 12 : this.fromMonth - 1;
} else if (range === 'to') {
if(this.toMonth>this.fromMonth+1 && this.fromMonth<this.toMonth){
this.toMonth=this.toMonth === 1 ? 12 : this.toMonth - 1;
}
else if(this.toMonth===this.fromMonth && this.fromYear !== this.toYear){
this.fromMonth=this.fromMonth === 1 ? 12 : this.fromMonth - 1;
}else if(this.fromYear === this.toYear){
this.toMonth=this.toMonth === 1 ? 12 : this.toMonth - 1;
this.fromMonth=this.fromMonth === 1 ? 12 : this.fromMonth - 1;
}else{
this.toMonth=this.toMonth === 1 ? 12 : this.toMonth - 1;
}
}
if(this.fromMonth === 12) this.fromYear--
if(this.toMonth === 12) this.toYear--
this.fromDate={month:this.fromMonth,year:this.fromYear}
this.toDate={month:this.toMonth,year:this.toYear}
}

nextMonth(range: 'from' | 'to') {
if (range === 'from') {
if(this.fromMonth+1<this.toMonth){
this.fromMonth=this.fromMonth === 12 ? 1 : this.fromMonth + 1;
}
else if(this.toMonth+1===this.fromMonth && this.fromYear === this.toYear){
this.toMonth=this.toMonth === 12 ? 1 : this.toMonth + 1;
}else{
this.toMonth=this.toMonth === 12 ? 1 : this.toMonth + 1;
this.fromMonth=this.fromMonth === 12 ? 1 : this.fromMonth + 1;
}
} else if (range === 'to') {
this.toMonth = this.toMonth === 12 ? 1 : this.toMonth + 1;
}
if (this.toMonth === 1) this.toYear++;
if(this.fromMonth === 1) this.fromYear++;
}

prevYear(range: 'from' | 'to') {
if (range === 'from') {
this.fromYear--;
this.toYear--
} else if (range === 'to') {
this.toYear--;
this.fromYear--
}

}

nextYear(range: 'from' | 'to') {
if (range === 'from') {
this.fromYear++;
this.toYear++
} else if (range === 'to') {
this.toYear++;
this.fromYear++
}
}

onDateSelection(date: NgbDate) {
console.log(date)

if (!this.fromDate && !this.toDate) {
this.fromDate = date;
} else if (this.fromDate && !this.toDate && date.after(this.fromDate)) {
this.toDate = date;
this.updateInputValue();
} else {
this.toDate = null;
this.fromDate = date;
this.formattedRange = '';
}
}


HTML code:

<ngb-datepicker #dp [displayMonths]="2" [dayTemplate]="t" (dateSelect)="onDateSelection($event)"
class="ngb-dp-container" [startDate]="startDate" [maxDate]="maxDate" outsideDays="visible"
ngbDropdownMenu aria-labelledby="dropdownBasic1">
<ng-template #t let-date let-focused="focused" let-currentMonth="currentMonth">
<span class="custom-day" [class.focused]="focused" [class.range]="isRange(date)"
[class.faded]="isHovered(date) || isInside(date)" (mouseenter)="hoveredDate = date"
(mouseleave)="hoveredDate = null">
{{ date.day }}
</span>
</ng-template>
</ngb-datepicker>


This is changing my months text based on logic properly but not changing the days template which i want. The issue is that I researched that the datepicker can be navigated by their own built-in function navigateTo() which requires a parameter that is of ngbDate type but this function only navigates the from screen. If anyone knows this solution. give it a try.

Continue reading...