在初始加载中，如何在NgbDatePicker的输入字段中显示日期

Question

我正在使用NgbDatePicker，并且在页面的“初始加载”上，我希望今天的日期显示在datepicker的输入字段中。当前在初始加载中，正在显示占位符值。有什么方法可以在加载时在输入字段中显示今天的日期。

<input width="100px" class="form-control " [(ngModel)]="selectedDate" #date

        (ngModelChange)="dateSelected(date.value)" placeholder="dd-mm-yyyy" name="dp" ngbDatepicker #d="ngbDatepicker"

        pattern="[0-9]{4}[-][0-9]{2}[-][0-9]{2}" [minDate]="{year: 2010, month: 1, day: 1}" [maxDate]="maxDate"

        [markDisabled]="isDisabled" />

      <div class="input-group-append">

        <button class="btn btn-outline-secondary fas fa-calendar-alt" (click)="d.toggle()"

          (change)="dateSelected($event.target.value)" type="button"

          (ngModelChange)="dateSelected($event.target.value)"></button>

      </div>

预期结果：加载时，今天的日期应显示在输入字段中。

实际结果：仅显示占位符的值。

Answer 1

如果您想充分利用NgBoostrap DatePicker模块，则可以将NgbCalendar服务导入到component.ts中，并使用它来获取今天的日期。请注意，NgBootstrap日期选择器不接受常规的JavaScript Date对象或日期字符串作为输入，因为它使用NgbDateStruct接口。首先，将NgbCalendar导入到您的component.ts中，import { NgbCalendar, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';然后，使用getToday()方法并将今天的日期分配给selectedDate属性。您的日期选择器应使用今天的日期进行初始化。selectedDate: NgbDateStruct = undefined;constructor(private calendar: NgbCalendar) {&nbsp;&nbsp; this.selectedDate = calendar.getToday()}另外，您也可以使用Vanilla JavaScript设置今天的日期，constructor(private calendar: NgbCalendar) {&nbsp;&nbsp; const today = new Date();&nbsp; this.selectedDate = {&nbsp; &nbsp; day: today.getDate(),&nbsp; &nbsp; month: today.getMonth() + 1,&nbsp; &nbsp; year: today.getFullYear()&nbsp; };}

Answer 2

请注意，ngbDatepicker模型是一个NgbDate对象。您必须在构造函数或onInit方法中设置[ngModel] =“ selectedDate”变量，类似这样。ngOnInit() {var today = new Date();this.selectedDate = new NgbDate(today.getFullYear(), today.getMonth(), today.getDate())}