Блог

Я осмотрелся и не смог найти ничего определенного по этому вопросу — можете ли вы использовать ng2-bootstrap datepicker с формой, управляемой моделью Angular2, или она работает только с шаблонными формами?

В документации описывается селектор таким образом, чтобы вы могли использовать его следующим образом (в качестве примера):

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

… который, похоже, работает. В идеале я хотел бы использовать его следующим образом:

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

…но, похоже, это не работает таким образом из коробки. Есть ли способ использовать этот модуль с формами, управляемыми моделью? Если нет, есть ли разумная альтернатива, которая будет работать с формами, управляемыми моделью? (Я также пробовал ng2-datepicker, но есть выдающаяся ошибка, которая делает его неудобным для использования с SystemJS, что вызывает сожаление, потому что выглядит гладко).

Я создал простую оболочку для ng2-bootstrap datepicker, чтобы использовать ее с ReactiveFormsModule. Он использует moment, поэтому вы можете улучшить его для своих нужд.

Живая демонстрация

пользовательский-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()
  })
}
 

Я использовал набор элементов управления PrimeNG, и у них есть элемент управления календарем с потрясающей функциональностью. Смотрите это здесь: элемент управления календарем пользовательского интерфейса PrimeNG