Как установить пользовательскую дату программно с помощью ng bootstrap & angular 6? - PullRequest
Новая
       7

Как установить пользовательскую дату программно с помощью ng bootstrap & angular 6?

0 голосов
/ 13 сентября 2018

Здесь я пытаюсь установить дату программно с помощью ng-bootstrap выбора даты

Я попробовал что-то вроде этого, поставив пользовательскую дату 

this.model= {
  "year": 2018,
  "month": 8,
  "day": 15
}

Я знаю, что это неэффективный способ, и есть одна проблема, заключающаяся в том, что после выбора даты сборщик даты не переходит на этот конкретный месяц.

Предположим, что если я выберу 2-е января 2018 года, то он также останется в текущем месяце и не будет перемещаться в январь. Как я могу решить эти проблемы?

Ниже приведен мой код и стек блиц-ссылки

.ts код 

model: NgbDateStruct;
  date: {year: number, month: number};
  constructor(private calendar: NgbCalendar){

  }

   selectToday() {
    this.model = this.calendar.getToday();
  }

  select(){
    this.model= {
  "year": 2018,
  "month": 8,
  "day": 15
}

.html файл 

<ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next"></ngb-datepicker>

1 Ответ

0 голосов
/ 13 сентября 2018

Просто используйте привязку [startDate]="model", чтобы при обновлении модели вы всегда были на странице: 

<ngb-datepicker #dp [(ngModel)]="model" [startDate]="model" (navigate)="date = $event.next"></ngb-datepicker>

Или вы можете перемещаться по календарю вручную с помощью dp.navigateTo(model) метода: 

<ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next"></ngb-datepicker>

<button class="btn btn-sm btn-outline-primary mr-2" (click)="selectToday(dp)">Select Today</button>
<button class="btn btn-sm btn-outline-primary mr-2" (click)="select(dp)">Select Custom</button>

И в контроллере: 

selectToday(dp) {
  this.model = this.calendar.getToday();
  dp.navigateTo(this.model);
}

select(dp){
  this.model = {
    "year": 2018,
    "month": 8,
    "day": 15
  }
  dp.navigateTo(this.model);
}

Подробнее об этом: https://ng -bootstrap.github.io / # / components / datepicker / Overview # навигация

Обновленный пример: https://stackblitz.com/edit/angular-knmpxc

Ручное решение: https://stackblitz.com/edit/angular-uvmjg4

...