如何在angular2中使用bootstrap日期选择器输入字段

Question

我已经按照下面提到的步骤进行操作，并且已经能够达到以下图像。

安装6.9.1版本的nodejs。它带有 npm 3.10.8
然后我就关注了下面installation steps。
现在，当我尝试使用 <ngb-datepicker></ngb-datepicker> 时，我能够看到这种类型的屏幕。

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

我尝试了 <input ngbDatepicker />，但只出现了一个文本框。当我聚焦它时，它没有显示日期选择器。

这是我正在使用的 link。

Answer 1

要在焦点上显示日期选择器，您可以通过使用 template reference 使用 focus 输入事件，如下所示：

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

Answer 2

努力工作后得到ranakrunal9. I have reached in this following code base. It is working fine in all aspect (But still only one issue I have that, the datepicker is not being closed if I click outside of the datepicker) Here is the 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 :
        '';
  }
}

如何在angular2中使用bootstrap日期选择器输入字段

How to use bootstrap datepicker input field in angular2

datepicker

ng-bootstrap

angular