0

我环顾四周，找不到任何明确的信息-您可以将 ng2-bootstrap 日期选择器与 Angular2 模型驱动表单一起使用，还是仅适用于模板表单？

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

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

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

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

...但它似乎并没有开箱即用。有没有办法将此模块与模型驱动表单一起使用？如果没有，是否有合理的替代方案适用于模型驱动的表单？（我也尝试过 ng2-datepicker，但有一个突出的错误使得它与 SystemJS 一起使用很不方便，这很不幸，因为它看起来很光滑）。

4

2 回答 2

5

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

现场演示

自定义 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()
  })
}
于 2016-11-30T05:30:16.617 回答
1

我使用了 primeNg 控件集，它们有一个具有惊人功能的日历控件。在此处查看： PrimeNg 日历 UI 控件

于 2016-10-14T15:59:13.777 回答