如何在angular2中使用bootstrap datepicker输入字段

Question

我遵循了下面提到的步骤，我已经能够达到以下图像。

1. 安装版本6.9.1的nodejs。它附带npm 3.10.8
2. 然后我跟着以下installation steps。
3. 现在，当我尝试使用var output = [ [ '0001', '0002', '0003', '0004' ], [ 'Roman Alamsyah', 'Dika Sembiring', 'Winona', 'Bintang Senjaya' ], [ '21/05/1989', '10/10/1992', '25/12/1965', '13/9/1994', '10/8/1994', '19/7/1994' ], ] ; var month=['jan' ,'feb','mar','aprl','may','jun','july','aug','sep','oct','nov','dec']; function mixarray(){ var newmonths =[]; for(var j=0 ; j< output[2].length; j++){ var mon = output[2][j].split('/'); newmonths.push(month[mon[1]-1]) } console.log(newmonths) } mixarray(output);时，我能够看到这种类型的屏幕。

但我无法理解如何使用<ngb-datepicker></ngb-datepicker>

我尝试了input[ngbDatepicker]，但只显示了一个文本框。当我关注它时，它没有显示日期选择器。

以下是我正在使用的link。

Answer 1

要在焦点上显示日期选择器，您可以使用focus输入<input ngbDatepicker #d="ngbDatepicker" (focus)="d.open()"> 事件，如下所示：

toggle

或者，您可以按{@ 1}} template reference

的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> 事件的datepicker

NSManagedObject

Answer 2

经过大量工作后得到了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 :
        '';
  }
}