Есть ли событие onHidden для ngb-datepicker? Если нет, как мы можем добавить события в пользовательские компоненты в angular? - PullRequest
Новая
       26

Есть ли событие onHidden для ngb-datepicker? Если нет, как мы можем добавить события в пользовательские компоненты в angular?

0 голосов
/ 08 января 2019

Я использую средство выбора даты из этого источника: https://ng -bootstrap.github.io / # / components / datepicker / api

И я хотел бы проверить, закрыт ли ngb-datepicker, потому что мне нужно изменить текст кнопки, где он срабатывает.

шаблон: 

 <button (click)="dp.open(); changeText();">{{buttonText}}</button>
 <ngb-datepicker #dp 
     [(ngModel)]="model" 
     (onHidden)="changeButtonText2()"  <<---is this possible? >
/>

ц 

 import {Component} from '@angular/core';
 import {NgbCalendar} from '@ng-bootstrap/ng-bootstrap';

 @Component({
    selector: 'ngbd-datepicker-basic',
    templateUrl: './datepicker-basic.html'
 })

 export class NgbdDatepickerBasic {

   buttonText: string = 'Open Calendar'

 constructor(private calendar: NgbCalendar) {
 }

 changeText() {
   this.buttonText = 'The Calendar is Open';
 }

 changeButtonText2() {
   this.buttonText = 'Open Calendar'
 }
}

У npx-bootstrap datepick есть это, но кажется, что ngb-datepicker не реализует эту функцию. Может кто-нибудь помочь мне создать обходной путь, чтобы мне не пришлось использовать ngx-bootstrap только для этого? Я уже добавил немного стиля, так что ...

Спасибо:)

1 Ответ

0 голосов
/ 08 января 2019

Если вы используете всплывающее окно выбора даты и хотите изменить только текстовую кнопку 

<form class="form-inline">
  <button (click)="dpk.toggle()">{{ dpk.isOpen() ? 'The Calendar is Open' : 'Open Calendar' }}</button>
  <div class="form-group">
      <input class="form-control" placeholder="yyyy-mm-dd"
             name="dp" [(ngModel)]="model" ngbDatepicker #dpk="ngbDatepicker">
  </div>
</form>

если вы хотите настроить больше кода, используйте это: 

@ViewChild('dpk') dpk: NgbDatepicker;

  ngAfterViewInit() {
    this.dpk['close'] = () => {
      if (this.dpk['isOpen']) {
        // super origin event
        this.dpk['_vcRef'].remove(this.dpk['_vcRef'].indexOf(this.dpk['_cRef'].hostView));
        this.dpk['_cRef'] = null;
        this.dpk['_closed$'].next();
        // custom code
        console.log('closed');
      }
    };
  }
...