Фокусировка в ng-Datepicker CellEditor для AG Grid - PullRequest
Новая
       15

Фокусировка в ng-Datepicker CellEditor для AG Grid

0 голосов
/ 09 октября 2018

Я реализовал CellEditor для Ag Grid.Я хочу прекратить редактирование в сетке, когда компонент теряет фокус.

Когда я нажимаю 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();
  }

}
...