因此,我试图将两个日历放在侧边栏上以进行时间选择。 但是,当我从第一个选择日期时,它也会影响第二个日期。那里也显示相同的日期。 这是.TS组件
export class NgbdDatepickerRange {
hoveredDate: NgbDate | null = null;
fromDate: NgbDate;
toDate: NgbDate | null = null;
fromCompareDate: NgbDate;
toCompareDate: NgbDate | null = null;
constructor(calendar: NgbCalendar) {
// this.fromDate = calendar.getToday();
// this.toDate = calendar.getNext(calendar.getToday(), 'd', 10);
}
onDateSelection2(date: NgbDate) {
if (!this.fromCompareDate && !this.toCompareDate) {
this.fromCompareDate = date;
} else if (this.fromCompareDate && !this.toCompareDate && date.after(this.fromCompareDate)) {
this.toCompareDate = date;
} else {
this.toCompareDate = null;
this.fromCompareDate = date;
}
}
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;
}
}
///////////////////////////////////////////////// /////////////////// 这是HTML组件
范围选择示例
<ngb-datepicker #dp (dateSelect)="onDateSelection($event)" [displayMonths]="2" [dayTemplate]="t" outsideDays="hidden">
</ngb-datepicker>
<ng-template #t let-date let-focused="focused">
<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 #dp (dateSelect)="onDateSelection2($event)" [displayMonths]="2" [dayTemplate]="t" outsideDays="hidden">
</ngb-datepicker>
<ng-template #t let-date let-focused="focused">
<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>
<hr>
<pre>From: {{ fromDate | json }} </pre>
<pre>To: {{ toDate | json }} </pre>