ng- bootstrap DatePicker выбора диапазона не работает (кто-нибудь может мне помочь в этом)?

Question

Datepicker работает нормально, когда запускается как отдельный angular проект, но если я добавлю то же самое в свой проект, я не смогу выбрать дату, и он не будет добавлен в поле ввода. k

снимок экрана:

ng- bootstrap -Datepicker

от Приведенные выше примеры, которые я использовал (выбор диапазона) для встроенного указателя даты и (выбор диапазона во всплывающем окне) для ввода значения. поэтому я объединил оба.

module.ts:

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
declarations: [ NgbModule ]

component.ts:

import {NgbDate, NgbCalendar, NgbDateParserFormatter} from '@ng-bootstrap/ng-bootstrap';

hoveredDate: NgbDate | null = null;

  fromDate: NgbDate;
  toDate: NgbDate | null = null;

  constructor(private calendar: NgbCalendar, public formatter: NgbDateParserFormatter) {
    this.fromDate = calendar.getToday();
    this.toDate = calendar.getNext(calendar.getToday(), 'd', 0);
  }

  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);
  }

  validateInput(currentValue: NgbDate | null, input: string): NgbDate | null {
    const parsed = this.formatter.parse(input);
    return parsed && this.calendar.isValid(NgbDate.from(parsed)) ? NgbDate.from(parsed) : currentValue;
  }

component. html:

<ngb-datepicker 
#dp (dateSelect)="onDateSelection($event)" 
[displayMonths]="2" 
[dayTemplate]="t" 
outsideDays="hidden">
</ngb-datepicker>
<form class="form-inline">
  <div class="form-group hidden">
    <div class="input-group">      
      <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>
    </div>
  </div>  
      <div class="form-group">
        <div class="input-group">
          <div class="start_date">Start Date</div>
          <div class="close_icon"><img src="assets/images/close.svg"></div>
          <input #dpFromDate
                class="form-control month_input" placeholder="yyyy-mm-dd"
                name="dpFromDate"
                [value]="formatter.format(fromDate)"
                (input)="fromDate = validateInput(fromDate, dpFromDate.value)">      
        </div>
      </div>
      <div class="form-group ml-2">   
        <div class="input-group">
          <div class="start_date">Start Date</div>
          <div class="close_icon"><img src="assets/images/close.svg"></div>
          <input #dpToDate
                class="form-control month_input" placeholder="yyyy-mm-dd"
                name="dpToDate"
                [value]="formatter.format(toDate)"
                (input)="toDate = validateInput(toDate, dpToDate.value)">      
        </div>
      </div>

</form>
<div class="schedule">
  <input class="apply" type="button" value="Apply">
</div>