angle2のbootstrap datepicker入力フィールドの使用方法

Question

私は以下の手順に従っており、以下の画像を完成させることができました。

1. バージョン6.9.1のインストールノードです。それはnpm 3.10.8と付属しています
2. 私は次のinstallation stepsに従った。
3. 今私が<ngb-datepicker></ngb-datepicker>を使用しようとすると、このタイプの画面が表示されます。

は、しかし、私は<input ngbDatepicker />だけテキストボックスapperr、私はそれをfoucsとき、それは日付ピッカーが表示されないを試してみましたinput[ngbDatepicker]

使用方法を理解することはできませんよ。

ここには私が使用しているlinkがあります。あなたは以下のようにtemplate referenceを用いて、入力のfocusイベントを使用することができます焦点に日付ピッカーを表示するには

Answer 1

多くの作業をした後、ranakrunal9から提案がありました。私はこの次のコードベースに到達しました。これは、すべての局面では正常に動作している（しかし、それでもまだ、私は日付ピッカーの外側をクリックすると、日付ピッカーが閉じられていない、ことを持っている唯一の問題）ここではplunker

import {Component, NgModule} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 
import {NgbModule, NgbDateParserFormatter, NgbDateStruct} from '@ng-bootstrap/ng-bootstrap'; 
import { Component, OnInit, Input, forwardRef } from '@angular/core'; 
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; 
import { FormGroup, FormBuilder, Validators } from '@angular/forms'; 

@Component({ 
    imports: [ 
    NgbModule, 
    BrowserModule, 
    NgbDateParserFormatter 
    ], 
    selector: 'my-app', 
    templateUrl: 'template.html' 
}) 
export class App { 


} 

@NgModule({ 
    imports: [ BrowserModule, 
    NgbModule.forRoot()], 
    providers : [ 
    {provide: NgbDateParserFormatter, useClass: forwardRef(() => CustomDateParserFormatter)} 
    ], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 
export class AppModule {} 



export class CustomDateParserFormatter extends NgbDateParserFormatter { 
    parse(value: string): NgbDateStruct { 
    if (value) { 
     const dateParts = value.trim().split('/'); 
     /* 
    Put your logic for parsing 
     */ 
    } 
    return null; 
    } 

    format(date: NgbDateStruct): string { 
    return date ? 
     date.day+'/'+date.month+'/'+date.year : 
     ''; 
    } 
} 

Answer 2

：

<input ngbDatepicker #d="ngbDatepicker" (focus)="d.open()"> 

それとも、Datepicker

の Datepicker in a popup例に従ってボタンクリックで日付ピッカーのトリガー toggleイベントを追加することができます

// Component 
@Component({ 
    selector: 'ngbd-datepicker-popup', 
    templateUrl: './datepicker-popup.html' 
}) 
export class NgbdDatepickerPopup { 
    model; 
} 

// HTML 
<div class="input-group"> 
    <input class="form-control" placeholder="yyyy-mm-dd" name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker"> 
    <div class="input-group-addon" (click)="d.toggle()" > 
    <img src="img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;"/> 
    </div> 
</div>