Как использовать начальное поле ввода даты загрузки в angular2

Question

Я выполнил следующие шаги, и я смог достигнуть следующего изображения.

1. установить nodejs версии 6.9.1. Он поставляется с npm 3.10.8
2. Затем я следил за следующим installation steps.
3. Теперь, когда я пытаюсь использовать <ngb-datepicker></ngb-datepicker>, я могу видеть этот тип экрана.

Но я не могу понять, как использовать input[ngbDatepicker]

Я попытался <input ngbDatepicker />, но только текстовое поле apperr, когда я foucs, он не отображается выбора даты.

Вот link, который я использую.

Answer 1

После много работы и получил предложение от ranakrunal9. Я достиг этой следующей базы кода. Он работает отлично во всех аспектах (Но все еще только один вопрос, я это, DatePicker не закрывается, если я нажму вне DatePicker) Вот 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

Для отображения DatePicker на фокус вы можете использовать focus событие ввода с помощью template reference, как показано ниже:

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

Или вы можете добавить триггер toggle событие DatePicker по нажатию кнопки, как на Datepicker in a popup примере Datepicker

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