1

我使用 ng2-bootstrap 日期选择器，当我单击日期选择器时，它仍然显示，如何隐藏它？我的 html 代码如下。请帮助我，谢谢

<input type="text" [ngModel]="dt.toLocaleDateString()" (focus)="showDatePicker = true" style="width:300px;">
<div *ngIf="showDatePicker" style="position: absolute; z-index:10; min-height:290px;">
    <datepicker [(ngModel)]="dt"  [showWeeks]="true" ></datepicker>
</div>

4

3 回答 3

0

我有同样的问题。就目前而言，这似乎是不可能的。作者正在开发新版本。查看回购：这里

于 2016-07-20T21:11:00.110 回答
0

您可以使用类名和 id 使用事件目标 (click)="close($event.target)" 关闭 datepicket 弹出窗口（即 DatePickerPopupDirective），它适用于我。

在我的 datepicker.component.html 模板中：

  <div *ngIf="opened" class="dateclass">
<datepicker  [(ngModel)]="dt" [minDate]="minDate" [formatDayHeader]="E"   
    (click)="close($event.target)"
    [showWeeks]="false"></datepicker>
</div>

由于 ng2-bootstrap datepicker 使用“btn btn-default btn-sm”作为日期和年份的类名，我们在 if 条件中使用 id 和类名。

public close(e:HTMLElement): void {
    if(e.className == 'btn btn-default btn-sm' && e.id !== 'undefined-title'){
    this.opened = false;
    }
}

我的整个日期选择器组件如下所示：

import { Component, OnInit, Input } from '@angular/core';
import {CORE_DIRECTIVES} from '@angular/common';
import {DATEPICKER_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';
import { FORM_DIRECTIVES }from '@angular/forms';

@Component({
  moduleId: module.id,
  selector: 'app-datepicker',
  templateUrl: 'datepicker.component.html',
  directives: [DATEPICKER_DIRECTIVES, FORM_DIRECTIVES, CORE_DIRECTIVES],
  styleUrls: ['datepicker.component.css'],
  exportAs: 'dateref'
})
export class DatepickerComponent implements OnInit {
  @Input()  private dt: Date = new Date();
  public minDate: Date = void 0;
  public events: Array<any>;
  private opened: boolean = false;
  constructor() {
    this.minDate = new Date();
  }
  public getDate(): any {
   return (this.dt && this.dt.getTime());
  }

  public open(): void {
    this.opened = !this.opened;
  }

  public close(e:HTMLElement): void {
    if(e.className == 'btn btn-default btn-sm' && e.id !== 'undefined-title'){
    this.opened = false;
    }
  }
 ngOnInit() {
 }
}

在我的父模板中，我使用 exportAs 'dateref' 来引用 @ViewChild('dp') datePicker; 作为：

<app-datepicker #dp="dateref"></app-datepicker>
于 2016-07-22T11:42:59.890 回答
-1

这是我的代码，它工作正常：

<div class="input-group">
    <input type="text" class="form-control "
           (focus)="showDatePicker = !showDatePicker" name="inputBeginDate"
           value="{{dt | date:'MM/dd/yy'}}"/>
    <span class="input-group-addon" dropdownToggle
          (click)="showDatePicker = !showDatePicker"><i class="fa fa-calendar"></i></span>
    <div *ngIf="showDatePicker"
         style="position: absolute; z-index:10; min-height:290px;">
        <datepicker name="date" [showWeeks]="false" [(ngModel)]="dt" (ngModelChange)="setDate(dt);getInvoices(invoiceFilters)" (selectionDone)="showDatePicker = false"></datepicker>
    </div>
</div>
于 2017-04-15T23:29:27.857 回答