99 lines
2.6 KiB
TypeScript
99 lines
2.6 KiB
TypeScript
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
|
|
import {DatePipe, NgForOf, NgIf} from '@angular/common';
|
|
|
|
@Component({
|
|
selector: 'datepicker',
|
|
imports: [
|
|
NgForOf,
|
|
DatePipe,
|
|
NgIf
|
|
],
|
|
templateUrl: './datepicker.component.html',
|
|
styleUrl: './datepicker.component.scss'
|
|
})
|
|
export class DatepickerComponent implements OnInit {
|
|
@Input() currentDate = new Date(); // startmaand
|
|
secondDate = new Date(); // tweede maand
|
|
|
|
calendars: any[][] = [[], []];
|
|
selectedDate: Date | null = null;
|
|
@Output() onSelectedDate: EventEmitter<Date> = new EventEmitter();
|
|
|
|
ngOnInit() {
|
|
this.updateSecondDate();
|
|
this.generateCalendars();
|
|
}
|
|
|
|
updateSecondDate() {
|
|
this.secondDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() + 1, 1);
|
|
}
|
|
|
|
generateCalendars() {
|
|
this.calendars[0] = this.generateCalendar(this.currentDate);
|
|
this.calendars[1] = this.generateCalendar(this.secondDate);
|
|
}
|
|
|
|
generateCalendar(date: Date) {
|
|
const year = date.getFullYear();
|
|
const month = date.getMonth();
|
|
|
|
const firstDay = new Date(year, month, 1);
|
|
const lastDay = new Date(year, month + 1, 0);
|
|
|
|
let day = new Date(firstDay);
|
|
day.setDate(day.getDate() - ((day.getDay() + 6) % 7)); // maandag starten
|
|
|
|
const calendar: any[] = [];
|
|
|
|
while (day <= lastDay || day.getDay() !== 1) {
|
|
const week = {
|
|
number: this.getWeekNumber(day),
|
|
days: []
|
|
};
|
|
|
|
for (let i = 0; i < 7; i++) {
|
|
week.days.push(new Date(day));
|
|
day.setDate(day.getDate() + 1);
|
|
}
|
|
|
|
calendar.push(week);
|
|
}
|
|
|
|
return calendar;
|
|
}
|
|
|
|
getWeekNumber(d: Date): number {
|
|
const date = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
|
|
const dayNum = date.getUTCDay() || 7;
|
|
date.setUTCDate(date.getUTCDate() + 4 - dayNum);
|
|
const yearStart = new Date(Date.UTC(date.getUTCFullYear(), 0, 1));
|
|
return Math.ceil((((+date - +yearStart) / 86400000) + 1) / 7);
|
|
}
|
|
|
|
selectDate(date: Date) {
|
|
this.selectedDate = date;
|
|
this.onSelectedDate.emit(date);
|
|
}
|
|
|
|
isToday(date: Date): boolean {
|
|
const today = new Date();
|
|
return date.toDateString() === today.toDateString();
|
|
}
|
|
|
|
isSelected(date: Date): boolean {
|
|
return this.selectedDate?.toDateString() === date.toDateString();
|
|
}
|
|
|
|
goToPreviousMonth() {
|
|
this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() - 1, 1);
|
|
this.updateSecondDate();
|
|
this.generateCalendars();
|
|
}
|
|
|
|
goToNextMonth() {
|
|
this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() + 1, 1);
|
|
this.updateSecondDate();
|
|
this.generateCalendars();
|
|
}
|
|
}
|