ng-bootstrap日期选择器格式化

Question

我正在使用ng-bootstrap日期选择器，但当我保存表单时，日期会被保存成...。

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: [''],
    });
  }

- Daimz

Answer 1

您正在使用 ng-bootstrap 而不是 ng2-bootstrap（两个不同的组）。其后面的代码使用 NgbDateStruct，它是一个对象 { day, month, year }

在提交时，您需要钩入并更改值为其他内容，例如：

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

NgbDatepicker和NgbInputDatepicker指令的模型接口NgbDateStruct

属性

day 类型: 数字 月份中的天数，从1开始计算

month 类型: 数字 月份，使用ISO 8601默认日历: 1=Jan ... 12=Dec

year 类型: 数字 年份，例如2016

- silentsod

---

让我感到困惑的是，为什么他们决定发明自己的日期对象而不是使用标准的日期对象。我想不出任何有效的理由去这样做，我讨厌因此而需要编写额外的代码来转换它们的格式。 - Davy

对我来说，在选择器中使用一个专门的日期结构非常有意义，因为日历具有日、月、年属性，它们是绝对数值（类似于选择出生日期，您选择三个数字）。对于日期选择器来说，使用日期对象始终是有问题的。 - Cesar

它的意义是有限的...考虑比较两个日期选择器的日期...使用这种日期结构，date1 > date2 是不可能的，但是如果默认使用 ISO 格式，则很容易实现...或者让用户在设置期间决定使用哪种格式。 - devnull69

Answer 2

如@silentsod所提到的，您需要将日期选择器使用的日期对象从格式转换为格式。ng-bootstrap提供了一个函数，将NgbDateStruct格式中的日期转换为ISO 8601格式（yyyy-mm-dd）。如果使用该格式，则无需编写自己的函数：

import {NgbDateParserFormatter} from '@ng-bootstrap/ng-bootstrap';

...

constructor(private ngbDateParserFormatter: NgbDateParserFormatter; ... ) {
    ...
}

...

onSubmit(): {
    let ngbDate = this.form.controls['due_date'].value;
    let myDate = this.ngbDateParserFormatter.format(ngbDate); // e.g. myDate = 2017-01-01
    ...
}

请参见：https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/datepicker/ngb-date-parser-formatter.ts

- TiaanM

Answer 3

你可以实现自己的方法将其转换为所需的DD-MM-YYYY格式。

或者，根据返回语句中元素的顺序和分隔符，你可以创建任何其他格式。

实现：

formatDate(d: NgbDate): string {
  if (d === null) {
    return null;
  }

  return [
    (d.day < 10 ? ('0' + d.day) : d.day),
    (d.month < 10 ? ('0' + d.month) : d.month),
    d.year
  ].join('-');
}

- michal.jakubeczy