-
Notifications
You must be signed in to change notification settings - Fork 1.5k
/
datepicker-range.ts
68 lines (62 loc) · 1.68 KB
/
datepicker-range.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import { Component, inject } from '@angular/core';
import { NgbCalendar, NgbDate, NgbDatepickerModule } from '@ng-bootstrap/ng-bootstrap';
import { FormsModule } from '@angular/forms';
import { JsonPipe } from '@angular/common';
@Component({
selector: 'ngbd-datepicker-range',
standalone: true,
imports: [NgbDatepickerModule, FormsModule, JsonPipe],
templateUrl: './datepicker-range.html',
styles: `
.custom-day {
text-align: center;
padding: 0.185rem 0.25rem;
display: inline-block;
height: 2rem;
width: 2rem;
}
.custom-day.focused {
background-color: #e6e6e6;
}
.custom-day.range,
.custom-day:hover {
background-color: rgb(2, 117, 216);
color: white;
}
.custom-day.faded {
background-color: rgba(2, 117, 216, 0.5);
}
`,
})
export class NgbdDatepickerRange {
calendar = inject(NgbCalendar);
hoveredDate: NgbDate | null = null;
fromDate: NgbDate = this.calendar.getToday();
toDate: NgbDate | null = this.calendar.getNext(this.fromDate, 'd', 10);
onDateSelection(date: NgbDate) {
if (!this.fromDate && !this.toDate) {
this.fromDate = date;
} else if (this.fromDate && !this.toDate && date.after(this.fromDate)) {
this.toDate = date;
} else {
this.toDate = null;
this.fromDate = date;
}
}
isHovered(date: NgbDate) {
return (
this.fromDate && !this.toDate && this.hoveredDate && date.after(this.fromDate) && date.before(this.hoveredDate)
);
}
isInside(date: NgbDate) {
return this.toDate && date.after(this.fromDate) && date.before(this.toDate);
}
isRange(date: NgbDate) {
return (
date.equals(this.fromDate) ||
(this.toDate && date.equals(this.toDate)) ||
this.isInside(date) ||
this.isHovered(date)
);
}
}