如何讓NG2的自舉日期選擇器隱藏

我用NG2的自舉日期選擇器，當我點擊日期選擇器，它仍然顯示，如何隱藏呢？我的HTML代碼。請到幫幫我，謝謝如何讓NG2的自舉日期選擇器隱藏

<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>

來源

2016-07-05 ruiheng lee

我有同樣的問題。目前它的接縫是不可能的。作者正在接受新版本的工作。請參閱回購：HERE

來源

2016-07-20 21:11:00 kizisoft

您可以使用類名稱和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的自舉日期選擇器採用「BTN BTN-默認BTN-SM」作爲類名日期和一年中，我們使用的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'）日期選擇器;如：

<app-datepicker #dp="dateref"></app-datepicker>

來源

2016-07-22 11:42:59 Karthigeyan

-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-15 23:29:27

你應該，在一般情況下，儘量提供_why_你的代碼的作品是什麼提問者應以不同的方式來做解釋和讓自己的代碼工作，而不是隻提供一個片段。 –

如何讓NG2的自舉日期選擇器隱藏

回答

相關問題