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 }

提交后，您需要挂钩并将值更改为其他内容，例如：

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 NgbDatepicker模型的接口和   NgbInputDatepicker指令


属性

day类型：number月份的日期，从1开始

month类型：number月份，默认日历我们使用ISO 8601：1 = Jan     ... 12 = 12月

年类型：数字年份，例如2016

Answer 2

正如@silentsod所提到的，您需要将datepicker使用的日期对象从NgbDateStruct格式转换为string格式。 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

Answer 3

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

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

实施：

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('-');
}

ng-bootstrap datepicker格式

3 个答案: