Paddy/DHBW-RaPla-Vorratsdatenspeicherung
1
0
Fork 0
Code Issues 8 Pull Requests Projects Releases Wiki Activity

Adding some fancy buttons to the datepicker
All checks were successful
Jenkins Production Deployment
Details

Browse Source
This commit is contained in:
Patrick Müller 2021-09-30 20:56:50 +02:00
parent 5c3870585e
commit 8e1c071645
3 changed files with 54 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
Frontend/src/app/components/datepicker/datepicker.component.css
View File

@ -1,3 +1,23 @@
.datepicker {
text-align: center;
}
.switchWeekButton {
background-color: dimgrey; /* Green */
border: none;
color: #E0E5E9;
padding: .15em .5em;
text-align: center;
display: inline-block;
border-radius: .5em;
margin: .5em;
}
.datePickerDropdown {
background-color: dimgrey;
border: none;
color: #E0E5E9;
padding: .15em .5em;
border-radius: .5em;
margin: .1em;
}

9
Frontend/src/app/components/datepicker/datepicker.component.html
View File

@ -1,18 +1,21 @@
<div class="datepicker">
<p *ngIf="itIsWednesday">It is Wednesday, my dudes!</p>
<select name="year" (change)="handleYearChange()" [(ngModel)]="selectedYear">
<button (click)="switchToPreviousWeek()" class="switchWeekButton">&lt;&lt; Previous week</button>
<select name="year" (change)="handleYearChange()" [(ngModel)]="selectedYear" class="datePickerDropdown">
<option *ngFor="let year of years">
{{year}}
</option>
</select>
<select name="month" (change)="handleMonthChange()" [(ngModel)]="selectedMonth">
<select name="month" (change)="handleMonthChange()" [(ngModel)]="selectedMonth" class="datePickerDropdown">
<option *ngFor="let month of months">
{{month}}
</option>
</select>
<select name="day" (change)="handleDayChange()" [(ngModel)]="selectedDay">
<select name="day" (change)="handleDayChange()" [(ngModel)]="selectedDay" class="datePickerDropdown">
<option *ngFor="let day of days">
{{day}}
</option>
</select>
<button (click)="switchToToday()" class="switchWeekButton">Today</button>
<button (click)="switchToNextWeek()" class="switchWeekButton">Next week &gt;&gt;</button>
</div>

29
Frontend/src/app/components/datepicker/datepicker.component.ts
View File

@ -147,7 +147,7 @@ export class DatepickerComponent implements OnInit {
mondayInWeekDate.setDate(selectedDate.getDate() - difference);
}
let yearString = mondayInWeekDate.getFullYear();
let yearString = mondayInWeekDate.getFullYear().toString();
let monthString = (mondayInWeekDate.getMonth() + 1).toString().padStart(2, '0');
let dayString = mondayInWeekDate.getDate().toString().padStart(2, '0');
@ -163,4 +163,31 @@ export class DatepickerComponent implements OnInit {
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();
}
}