ng-bootstrap 日期选择器格式

Posted 2023-05-07

【中文标题】ng-bootstrap 日期选择器格式

【英文标题】：ng-bootstrap datepicker format

【发布时间】：2017-04-08 03:48:28

【问题描述】：

我正在使用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: [''],
    );
  

【参考方案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 月

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

【讨论】：

这让我感到困惑，为什么他们决定发明自己的小日期对象而不是仅仅使用标准的日期对象。我想不出任何正当理由这样做，而且我讨厌编写额外的代码来转换它们的格式。

对我来说，为选择器使用专用的 Date 结构很有意义，因为日历具有绝对数字的日、月、年属性（类似于选择出生日期，您选择三个数字）。对于日期选择器，使用 Date 对象对我来说一直是个问题。

它的意义是有限的...考虑比较两个日期选择器日期...date1 > date2 使用这种日期结构是不可能的，但默认情况下使用 ISO 格式很容易...或者让用户决定在设置过程中使用哪种格式

【参考方案2】：

正如@silentsod 提到的，您需要将日期选择器使用的日期对象从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

【参考方案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('-');