Я использую средство выбора даты 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>У меня такая же проблема. На данный момент это кажется невозможным. Автор, похоже, работает над новой версией. См. репозиторий: ЗДЕСЬ
Вы можете использовать имя класса и идентификатор, чтобы закрыть всплывающее окно DatePicket (например, DatePickerPopupDirective), используя цель события (click)="close($event.target)", и это работает для меня.
В моем шаблоне 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.
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>
Это мой код, он отлично работает:
<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>
