Question

当我按下日期控件时，而且我没有输入日期，我点击Esc ==＆gt;日期控件不会消失我在外面点击==＆gt;日期控件不会消失这里是我的代码html和ts：

<input class="cssInputDate" type="text" id="dateDebut" name="dateDebut"
#dateDebut="ngModel"
(keyup)="onKeyUp($event)"
(blur)="checkDateDebut()"
required [ngModel]="dateDebutModel" (ngModelChange)="dateDebChange($event)" ngbDatepicker #ddeb="ngbDatepicker" >
<button tabindex="3" (click)="ddeb.toggle(); openDatepicker(ddeb)" type="button" style="margin-left: 0;" *ngIf="modificationMode" >
<i class="fa fa-calendar" aria-hidden="true"></i>
</button>

这里是.ts：

openDatepicker(id){
        console.log(" id =",id);
        console.log(" dateDebInput =",this.dateDebInput);
        this.dynamicId = id;
      }

    onClick(event) {
        if(this.dynamicId == undefined){
          console.log("Dynamic id ===",this.dynamicId);
        }
        else if(!this._eref.nativeElement.contains(event.target)) {
            this.dateDebInput.close();    
        }
      }

这里是控制台日志输出：

任何解决方案？

Answer 1

我找到了解决方案我在这里使用@HostListener代码：

@HostListener('mousedown', ['$event'])
    mouseEvent(event) {
        if(event.target.offsetParent.tagName !== 'NGB-DATEPICKER'){
            this.dateDebInput.close();
        }              
    }

逃生相同：

@HostListener('window:keyup', ['$event'])
    keyEvent(event: KeyboardEvent) {
        if (event.key === "Escape") {
            this.dateDebInput.close();
        }
    }

Answer 2

输入checkDateDebut的代码：

checkDateDebut() {
        const check = this.dateDebutModel != null && this.dateDebutModel !== '';
        const checkFinAfterDebut = this.checkDateFinAfterDateDebut();

        if (!check) {
            this.pushMessageFront('DIAG_ERR_029');
        } else {
            this.spliceMessageFront('DIAG_ERR_029');
        }

        if (!check || !checkFinAfterDebut) {
            this.highlight('dateDebut', true);
        } else {
            this.highlight('dateDebut', false);
        }
        return check && checkFinAfterDebut;
    }

css：

.cssInputDate{
    min-width: 85px;    
}

当我在Angular 4外部单击时，Datepicker日期控件不会消失

2 个答案: