Question

我正在使用以下来源的日期选择器：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? >
/>

ts：

 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'
 }
}

ngx-bootstrap datepick具有此功能，但是ngb-datepicker似乎未实现此功能。有人可以帮我创建解决方法，这样我就不必为此使用ngx-bootstrap吗？我已经添加了一些样式，所以...

谢谢：）

Answer 1

如果您使用的是弹出日期选择器，并且只想更改文本按钮

<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');
      }
    };
  }

ngb-datepicker是否有onHidden事件？如果没有，我们如何将事件添加到angular的自定义组件中？

1 个答案: