如何传入NgBootstrap日期选择器的DayTemplateContext TemplateRef？

Got it, let's get that range display working for your NgBootstrap datepicker! The key part you're missing is properly defining and referencing a TemplateRef<DayTemplateContext> that can render the selected range states. Here's a step-by-step breakdown:

1. Define the Day Template in Your Component's HTML #

First, create an ng-template in your template file. This template will receive context variables from the datepicker (like the current day, whether it's in the selected range, or if it's the start/end of the range) and let you style those states:

<!-- Your datepicker input trigger (adjust as needed) -->
<input class="form-control" placeholder="Select date range"
       ngbDatepicker #picker="ngbDatepicker"
       [rangeMode]="true"> <!-- Enable range selection mode -->
<button class="btn btn-outline-secondary" (click)="picker.toggle()">Toggle</button>

<!-- The custom day template for range display -->
<ng-template #dayTemplate let-d="day" let-focused="focused" let-selected="selected" let-range="range">
  <span class="custom-day"
        [class.focused]="focused"
        [class.range-start]="range.isStart"
        [class.range-end]="range.isEnd"
        [class.in-range]="range.isInRange"
        [class.faded]="range.isInRange && !range.isStart && !range.isEnd">
    {{ d.day }}
  </span>
</ng-template>

2. Reference the Template in Your Component Class #

Use @ViewChild to grab the template reference from your template, then assign it to NgbDatepickerConfig.dayTemplate:

import { Component, TemplateRef, ViewChild } from '@angular/core';
import { NgbDatepickerConfig, NgbCalendar, DayTemplateContext } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-your-datepicker-component',
  templateUrl: './your-datepicker-component.component.html',
  styleUrls: ['./your-datepicker-component.component.css']
})
export class YourDatepickerComponent {
  // Grab the template reference using its #dayTemplate identifier
  @ViewChild('dayTemplate') dayTemplate!: TemplateRef<DayTemplateContext>;

  constructor(config: NgbDatepickerConfig, calendar: NgbCalendar) {
    config.displayMonths = 3;
    // Assign the template to the config - this is what you were missing!
    config.dayTemplate = this.dayTemplate;

    const todayNGB = calendar.getToday();
    // Quick note: NgbDate uses 1-based months, while JS Date uses 0-based
    const today = new Date(todayNGB.year, todayNGB.month - 1, todayNGB.day);
    // ... rest of your initialization code
  }
}

3. Add CSS for Range Visuals #

To make the range states visible, add these styles to your component's CSS file:

.custom-day {
  padding: 0.3rem;
  text-align: center;
  border-radius: 0.25rem;
  cursor: pointer;
}

.custom-day.focused {
  background-color: rgba(0, 123, 255, 0.1);
}

.custom-day.range-start {
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  background-color: #007bff;
  color: white;
}

.custom-day.range-end {
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  background-color: #007bff;
  color: white;
}

.custom-day.in-range {
  background-color: rgba(0, 123, 255, 0.2);
}

.custom-day.faded {
  opacity: 0.7;
}

Quick Notes to Avoid Gotchas #

• Make sure you've enabled rangeMode="true" on your ngb-datepicker component (as shown in the HTML example) — this tells the datepicker to handle range selection.
• Remember that NgbDate uses 1-based months, while JavaScript's Date object uses 0-based months. That's why we subtract 1 when converting todayNGB.month to a JS Date.
• Double-check that you've imported NgbDatepickerModule and FormsModule in your Angular module (if you're using template-driven forms for the datepicker input).

内容的提问来源于stack exchange，提问作者NDDT