angular - ng-bootstrap 日期选择器格式

Question

我正在使用 ng-bootstrap datepicker 但是当我保存我的表单时，日期被另存为。

date: {
  day: 01,
  month: 12,
  year: 16
}

我希望我能把它保存为更像 "2016-11-23T00:39:31.768Z"

这是我的实现:

<div class="input-group">
  <button class="input-group-btn" (click)="d.toggle()" >
    <md-icon svgSrc="assets/images/calendar-plus.svg" style="cursor: pointer;"></md-icon>
  </button>
  <input class="form-control" placeholder="dd-mm-yyyy" name="dp" formControlName="due_date" navigation="arrows" ngbDatepicker #d="ngbDatepicker">
</div>

和 form.component:

constructor( private fb: FormBuilder ) {
    this.form = this.fb.group({
      due_date: [''],
    });
  }

Answer 1

您使用的是 ng-bootstrap 而不是 ng2-bootstrap(不同的组)。它背后的代码使用了 NgbDateStruct，它是一个对象 { day, month, year }

提交时，您需要 Hook 并将值更改为其他值，例如:

onSubmit(): {
    let ngbDate = this.form.controls['due_date'].value;
    let myDate = new Date(ngbDate.year, ngbDate.month-1, ngbDate.day);
    let formValues = this.form.value;
    formValues['due_date'] = myDate;
    <...>
    http.post(url, formValues);
}

https://ng-bootstrap.github.io/#/components/datepicker

NgbDateStruct Interface of the model of the NgbDatepicker and NgbInputDatepicker directives

Properties

day Type: number The day of month, starting at 1

month Type: number The month, with default calendar we use ISO 8601: 1=Jan ... 12=Dec

year Type: number The year, for example 2016