Как я могу отобразить дату в поле ввода NgbDatePicker, при начальной загрузке

Question

Я использую NgbDatePicker, и при начальной загрузке моей страницы я хочу, чтобы сегодняшняя дата отображалась в поле ввода моего средства выбора даты. В настоящее время при начальной загрузке отображается значение заполнителя. Есть ли способ отобразить сегодняшнюю дату в поле ввода при загрузке.

<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

Обратите внимание, что модель ngbDatepicker является объектом NgbDate.Вы должны установить переменную [ngModel] = "selectedDate" внутри вашего конструктора или метода onInit, что-то вроде этого.

ngOnInit() {
var today = new Date();
this.selectedDate = new NgbDate(today.getFullYear(), today.getMonth(), today.getDate())
}

Спасибо

Answer 2

Если вы хотите полностью использовать свой модуль 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) { 
  this.selectedDate = calendar.getToday()
}

В качестве альтернативы, вы можете установить сегодняшнюю дату с помощью Vanilla JavaScript,

constructor(private calendar: NgbCalendar) { 
  const today = new Date();
  this.selectedDate = {
    day: today.getDate(),
    month: today.getMonth() + 1,
    year: today.getFullYear()
  };
}