在AG网格的ng-Datepicker CellEditor中聚焦

时间:2018-10-09 08:55:53

标签: angular ag-grid ng-bootstrap

我已经为Ag Grid实现了CellEditor。当组件失去焦点时,我想停止在网格上进行编辑。

当我单击span button时,应打开一个日历以选择日期。问题是单击跨度按钮时不应出现焦点。 span button是组件的一部分。

我尝试使用stopEditingWhenGridLosesFocus,但是我的编辑器不是popup,所以当我单击按钮时,焦点也丢失了。

我的代码:

模板

<div class="input-group date" (focusout)="onFocusOut($event)">
  <input #container triggers="" type="text" #dp="bsDatepicker" class="form-control" (bsValueChange)="onValueChange($event)" bsDatepicker 
[bsConfig]="{ dateInputFormat: 'DD.MM.YYYY', containerClass: 'theme-dark-blue' }"
[(ngModel)]="dateValue"
[minDate]="minDate"
[maxDate]="maxDate">
  <span class="input-group-addon" (click)="dp.toggle();" [attr.aria- 
     expanded]="dp.isOpen"><i class="glyphicon glyphicon-calendar"></i> 
  </span>
</div>

component.ts

import { Component, OnInit, AfterViewInit, ViewChild, ViewContainerRef } from '@angular/core';
import { ICellEditorAngularComp } from 'ag-grid-angular';


import { defineLocale } from 'ngx-bootstrap/chronos';
import { deLocale } from 'ngx-bootstrap/locale';
import { BsLocaleService, BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
defineLocale('de', deLocale);

@Component({
  selector: 'bo-ui-grid-date-picker',
  templateUrl: './grid-date-picker.component.html',
  styleUrls: ['./grid-date-picker.component.css']
})
export class GridDatePickerComponent implements ICellEditorAngularComp, AfterViewInit {

  private params: any;
  public dateValue: Date;
  minDate: Date;
  maxDate: Date;
  datePickerConfig: Partial<BsDatepickerConfig>;

  @ViewChild('container', {read: ViewContainerRef }) public container;

  constructor(private localeService: BsLocaleService) {}

  ngAfterViewInit() {
    setTimeout(() => {
        this.container.element.nativeElement.focus();
    })
  }

  agInit(params: any): void {
    this.params = params;
    this.datePickerConfig = params.datePickerConfig;
    this.minDate = this.datePickerConfig.minDate;
    this.maxDate = this.datePickerConfig.maxDate;
    this.setValue(params.value);
    this.localeService.use('de')
  }

  getValue(): any {
    return this.dateValue;
  }

  setValue(date): void {
    this.dateValue = date;
  }

  onValueChange(value: Date): void {
    this.setValue(value);
  }

  onFocusOut(event: any){
    this.params.api.stopEditing();
  }

}

0 个答案:

没有答案