Невозможно установить дату для ng Bootstrap datepicker в Angular - PullRequest
Новая
       35

Невозможно установить дату для ng Bootstrap datepicker в Angular

0 голосов
/ 06 февраля 2020

Я работаю в Angular, где я использую ng Bootstrap Datepicker в Реактивной форме

Я пытался установить значение ng Bootstrap DatePicker со значением патча, но не удалось установить значение в это

Я делюсь своим кодом

Html 

<div class="form-group required control-label">
  <label>Date of Joining</label>
  <!-- <input type="text" class="form-control" formControlName="doj"  placeholder=""/> -->
  <div class="form-group">
    <div class="input-group">
      <input class="form-control"  formControlName="doj" placeholder="yyyy-mm-dd" name="dp" ngbDatepicker
                #e="ngbDatepicker">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary calendar" (click)="e.toggle()" type="button"></button>
      </div>
    </div>
  </div>
</div>

TS 

this.employeeForm.patchValue({
  doj: this.date
})

1 Ответ

0 голосов
/ 06 февраля 2020

ngbDatepicker использует интерфейс NgbDateStruct в качестве модели, а не собственный объект Date. 

this.employeeForm.patchValue({
doj : { year: 2020, month: 2, day: 6 } // should be { year , month , date } format
})

или создайте пользовательский форматер синтаксического анализатора. 

import { NgbDateParserFormatter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
import { Injectable } from '@angular/core';
import { isNumber, toInteger, padNumber } from '@ng-bootstrap/ng-bootstrap/util/util';

@Injectable()
export class NgbDateCustomParserFormatter extends NgbDateParserFormatter {
  parse(value: string): NgbDateStruct {
    if (value) {
      const dateParts = value.trim().split('-');
      if (dateParts.length === 1 && isNumber(dateParts[0])) {
        return {day: toInteger(dateParts[0]), month: null, year: null};
      } else if (dateParts.length === 2 && isNumber(dateParts[0]) && isNumber(dateParts[1])) {
        return {day: toInteger(dateParts[0]), month: toInteger(dateParts[1]), year: null};
      } else if (dateParts.length === 3 && isNumber(dateParts[0]) && isNumber(dateParts[1]) && isNumber(dateParts[2])) {
        return {day: toInteger(dateParts[0]), month: toInteger(dateParts[1]), year: toInteger(dateParts[2])};
      }
    }
    return null;
  }

  format(date: NgbDateStruct): string {
    return date ?
        `${isNumber(date.day) ? padNumber(date.day) : ''}-${isNumber(date.month) ? padNumber(date.month) : ''}-${date.year}` :
        '';
  }
}

Установите поставщика для пользовательского форматера синтаксического анализатора в @ NgModule. 

providers: [
    {provide: NgbDateParserFormatter, useClass: NgbDateCustomParserFormatter}
   ]
...