如何在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>