import {Component, EventEmitter, OnInit, Output} from '@angular/core'; @Component({ selector: 'app-datepicker', templateUrl: './datepicker.component.html', styleUrls: ['./datepicker.component.css'] }) export class DatepickerComponent implements OnInit { selectedYear: string = ''; selectedMonth: string = ''; selectedDay: string = ''; years: string[] = []; months: string[] = []; days: string[] = []; itIsWednesday: boolean = false; @Output() selectedMonday = new EventEmitter(); constructor() { } ngOnInit(): void { this.fillDatePickers(); this.handleDateChange(); } /** * Fills all the date pickers and sets the itIsWednesday variable */ fillDatePickers(): void { let currentDate = new Date(); if (currentDate.getDay() === 3) { this.itIsWednesday = true; } this.fillYearPicker(); this.fillMonthPicker(); this.fillDayPicker(); } /** * Fills the "year" picker with the appropriate values and pre-selects the current year */ fillYearPicker(): void { this.years = []; let currentDate = new Date(); let currentYear = currentDate.getFullYear().toString(); this.years = [ '2020', '2021', '2022' ]; this.selectedYear = currentYear; } /** * Fills the "month" picker with the appropriate values and pre-selects the current month */ fillMonthPicker(): void { this.months = []; let currentDate = new Date(); let currentMonth = (currentDate.getMonth() + 1).toString().padStart(2, '0'); for (let month = 1; month <= 12; month++) { let monthString = month.toString().padStart(2, '0'); this.months.push(monthString); } this.selectedMonth = currentMonth; } /** * Fills the "day" picker with the appropriate values and pre-selects the current day if possible */ fillDayPicker(): void { this.days = []; let currentDate = new Date(); let currentDay = currentDate.getDate().toString().padStart(2, '0'); let maxDays = 31; if (this.selectedMonth !== '') { maxDays = this.getDaysInGivenMonth(parseInt(this.selectedYear), parseInt(this.selectedMonth)); } else { maxDays = 31; } for (let day = 1; day <= maxDays; day++) { let dayString = day.toString().padStart(2, '0'); this.days.push(dayString); } this.selectedDay = parseInt(currentDay) < maxDays ? currentDay : maxDays.toString().padStart(2, '0'); } /** * Handles the change of the "year" picker */ handleYearChange(): void { this.fillDayPicker(); this.handleDateChange(); } /** * Handles the change of the "month" picker */ handleMonthChange(): void { this.fillDayPicker(); this.handleDateChange(); } /** * Handles a change of the "day" picker */ handleDayChange(): void { this.handleDateChange(); } /** * Handles changed date selections and fills the selectedMonday variable */ handleDateChange(): void { let mondayDate = this.findMondayInWeek(this.selectedYear, this.selectedMonth, this.selectedDay); this.selectedMonday.emit(mondayDate); } /** * Calculates the date of the monday in the week for any given date. * If you e.g. enter 2021, 09, 30 the result will be 2021-09-27 * @param year The year * @param month The month * @param day The day */ findMondayInWeek(year: string, month: string, day: string): string { let selectedDate = new Date(parseInt(year), parseInt(month) - 1, parseInt(day)); let mondayInWeekDate = selectedDate; let selectedDayInWeek = selectedDate.getDay(); // Sunday is 0 and Monday is 1, hence we want to substract until we land at 1. // Sunday is the exeption as we need to go to 1 in the "previous" week if (selectedDayInWeek === 0) { mondayInWeekDate.setDate(selectedDate.getDate() - 6); } else { let difference = selectedDayInWeek - 1; mondayInWeekDate.setDate(selectedDate.getDate() - difference); } let yearString = mondayInWeekDate.getFullYear().toString(); let monthString = (mondayInWeekDate.getMonth() + 1).toString().padStart(2, '0'); let dayString = mondayInWeekDate.getDate().toString().padStart(2, '0'); return yearString + '-' + monthString + '-' + dayString; } /** * Returns the number of days in the given month * @param year The year * @param month The month for which to return the number of days for */ getDaysInGivenMonth(year: number, month: number) { return new Date(year, month, 0).getDate(); } switchToNextWeek() { let currentDate = new Date(parseInt(this.selectedYear), parseInt(this.selectedMonth)-1, parseInt(this.selectedDay)); let newDate = currentDate; newDate.setDate(currentDate.getDate() + 7); this.selectedYear = newDate.getFullYear().toString(); this.selectedMonth = (newDate.getMonth()+1).toString().padStart(2, '0'); this.selectedDay = newDate.getDate().toString().padStart(2, '0'); this.handleDateChange(); } switchToPreviousWeek() { let currentDate = new Date(parseInt(this.selectedYear), parseInt(this.selectedMonth)-1, parseInt(this.selectedDay)); let newDate = currentDate; newDate.setDate(currentDate.getDate() - 7); this.selectedYear = newDate.getFullYear().toString(); this.selectedMonth = (newDate.getMonth()+1).toString().padStart(2, '0'); this.selectedDay = newDate.getDate().toString().padStart(2, '0'); this.handleDateChange(); } switchToToday() { let currentDate = new Date(); this.selectedYear = currentDate.getFullYear().toString(); this.selectedMonth = (currentDate.getMonth()+1).toString().padStart(2, '0'); this.selectedDay = currentDate.getDate().toString().padStart(2, '0'); this.handleDateChange(); } }