0

我相信默认行为是将年份导航默认为当前年份，其中 10 年前作为最小日期，10 年前作为最大日期。我的日期选择器默认为 Mindate 年份，这意味着它应该向用户显示 2021 年，但它向用户显示 2011 年。我不明白我哪里出错了，因为我的代码紧跟 ng-bootstrap 上的示例地点。

在此处输入图像描述

这是我的代码。

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
  hoveredDate: NgbDate | null = null;
  reportRequest: ReportsSearchRequest;
  isLoading: boolean = false;
  error: string;
  now: Date = new Date();
  startDate: NgbDate | null;
  endDate: NgbDate | null;

  constructor(private calendar: NgbCalendar,
    public formatter: NgbDateParserFormatter) {
    this.startDate = new NgbDate(this.now.getFullYear(), this.now.getMonth() + 1, 1);
    this.selectThisMonth();
  }
  ngOnInit(): void {
    this.init();
  }

  selectThisMonth(): void {
    const year: number = this.now.getFullYear();
    const month: number = this.now.getMonth() + 1;
    const day: number = new Date(year, month, 0).getDate();
    this.endDate = new NgbDate(year, month, day);
  }

-- HTML

  <pre>  <form class="form-inline">
        <div class="form-group hidden">
          <div class="input-group">
            <input
              name="datepicker"
              class="form-control"
              ngbDatepicker
              #datepicker="ngbDatepicker"
              [autoClose]="'outside'"
              (dateSelect)="onDateSelection($event)"
              [displayMonths]="2"
              [dayTemplate]="t"
              outsideDays="hidden"
              [startDate]="startDate!"
              tabindex="-1"
            />
            <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">
            <input
              #dpFromDate
              class="form-control"
              placeholder="yyyy-mm-dd"
              name="dpFromDate"
              [value]="formatter.format(startDate)"
              (input)="
                startDate = validateInput(startDate, dpFromDate.value)
              "
            />
            <div class="input-group-append">
              <i
                class="
                  fa fa-calendar
                  btn btn-outline-secondary
                  calendar
                "
                (click)="datepicker.toggle()"
                type="button"
                aria-hidden="true"
              ></i>
            </div>
          </div>
        </div>
        <div class="form-group ml-2">
          <div class="input-group">
            <input
              #dpToDate
              class="form-control"
              placeholder="yyyy-mm-dd"
              name="dpToDate"
              [value]="formatter.format(endDate)"
              (input)="endDate = validateInput(endDate, dpToDate.value)"
            />
            <div class="input-group-append">
              <i
                class="
                  fa fa-calendar
                  btn btn-outline-secondary
                  calendar
                "
                (click)="datepicker.toggle()"
                type="button"
                aria-hidden="true"
              ></i>
            </div>
          </div>
        </div>
      </form></pre>
4

0 回答 0