使用ng2-bootstrap datepicker的模型驱动表单

Question

我环顾四周，无法在此找到任何明确的内容 - 你可以使用带有Angular2模型驱动形式的ng2-bootstrap日期选择器，还是只能使用模板表单？

文档描述了选择器，您可以按照以下方式使用它（作为示例）：

<datepicker [(ngModel)]="startDate" ></datepicker>

......似乎确实奏效了。理想情况下，我想像这样使用它：

<datepicker formControlName="startDate" ></datepicker>

......但它似乎没有开箱即用的方式。有没有办法将此模块用于模型驱动表单？如果没有，是否有合理的替代方案可以使用模型驱动的表格？ （我还尝试了ng2-datepicker，但是outstanding bug使得使用SystemJS变得不方便，这很不幸，因为它看起来很光滑）。

Answer 1

我为ng2-bootstrap datepicker制作了简单的包装器，将它与ReactiveFormsModule一起使用。它使用时刻，因此您可以根据需要改进它。

<强> Live demo

自定义-datepicker.component.ts

import { Component, forwardRef, Provider } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
import * as moment from 'moment';

let DATEPICKER_VALUE_ACCESSOR: Provider = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => CustomDatepickerComponent),
  multi: true
};

@Component({
  selector: 'custom-datepicker[formControlName]',
  template: `
    <datepicker [(ngModel)]="datePickerValue"></datepicker>
  `,
  providers: [DATEPICKER_VALUE_ACCESSOR]
})
export class CustomDatepickerComponent implements ControlValueAccessor {
  change = (_: any) => {};
  _customDatePickerValue;
  _datePickerValue: Date;

  get customDatePickerValue() {
    return this._customDatepickerValue;
  }
  set customDatePickerValue(value) {
    this._customDatepickerValue = value;
    this.change(value);
  }

  get datePickerValue() {
    return this._datePickerValue;
  }
  set datePickerValue(value) {
    this._datePickerValue = value;
    this.customDatePickerValue = moment(value).format('DD/MM/YYYY');
  }

  writeValue() {}
  registerOnChange(fn) {
    this.change = fn;
  }
  registerOnTouched() {}
}

在您的组件中使用

<强> app.component.ts

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
  <form [formGroup]="form">
    <custom-datepicker formControlName="customDatepickerValue"></custom-datepicker>
  </form>

  <pre>{{form.value | json }}</pre>
    `
})
export class AppComponent {
  form: FormGroup = new FormGroup({
    customDatepickerValue: new FormControl()
  })
}

Answer 2

我使用了primeNg控件集，他们有一个具有惊人功能的日历控件。在这里看到： PrimeNg Calendar UI Control