如何在angular2中使用引導日期選擇器輸入域

Question

我遵循以下步驟，我已經能夠實現以下圖像。

1. 安裝版本6.9.1的nodejs。它附帶npm 3.10.8
2. 然後我按照以下installation steps。
3. 現在，當我嘗試使用<ngb-datepicker></ngb-datepicker>我能夠看到這種類型的屏幕。

但我無法理解如何使用input[ngbDatepicker]

我試圖<input ngbDatepicker />，但只有一個文本框apperr，當我FOUCS它，它沒有顯示的日期選擇器。我正在使用的link。

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

要顯示日期選擇器上的焦點，你可以通過如下使用template reference使用focus事件輸入：

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

或者您也可以點擊按鈕添加觸發toggle事件日期選擇爲每Datepicker

Datepicker in a popup例子

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