如何在Angular2中使用Bootstrap日期选择器输入框

Question

我按照以下步骤操作，已经成功实现以下图片。

1. 安装6.9.1版本的nodejs。它带有3.10.8版本的npm。
2. 然后我按照以下安装步骤进行操作。
3. 现在，当我尝试使用<ngb-datepicker></ngb-datepicker>时，我能够看到这种类型的屏幕。

但是我不知道如何使用input[ngbDatepicker] 我尝试了<input ngbDatepicker />，但只有一个文本框出现。当我聚焦它时，它没有显示日期选择器。

这是我正在使用的链接。

- Partha Sarathi Ghosh

---

你在 HTML 中添加了 bootstrap 的 CSS 吗？ - ranakrunal9

是的。添加后，设计发生了变化，但没有任何额外的东西。 - Partha Sarathi Ghosh

Answer 1

为了在焦点上显示日期选择器，您可以使用输入框的focus事件，并通过使用模板引用来实现，如下所示：

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

或者，您可以根据日期选择器中的弹出窗示例，在按钮单击上添加日期选择器的触发器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>

- ranakrunal9

---

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - silentsod

仍然无法使用它。文档非常少。请帮忙。 - Partha Sarathi Ghosh

我认为，对于日期格式化，您需要通过扩展NgbDateParserFormatter来创建自定义格式化程序，如https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/datepicker/ngb-date-parser-formatter.ts所示，并且需要在组件中添加它作为提供者，例如`{provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter}`，就像https://ng-bootstrap.github.io/#/components/datepicker页面上的“日期选择器的国际化”示例一样。 - ranakrunal9

Answer 2

在付出了很多的努力并得到了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 :
        '';
  }
}

- Partha Sarathi Ghosh

---

你是否找到了如何在失去焦点时关闭它的方法？我尝试将（失去焦点）绑定到执行d.close()。问题是，“使用日历”也算是失去焦点，所以在我选择日期之前，日历就已经关闭了。 - dabicho

是的，我也遇到了同样的问题，还没有解决。如果您能提出一个新的问题并在此处链接它，我认为这将会有所帮助。请同时创建一个 Plunker。 - Partha Sarathi Ghosh