使用 ngx-datepicker 更改 [(ngModel)] 上的日期格式

Question

我有一个记录出生日期的 Web 表单。我使用 ngx-bootstrap version: 2.0.2 datepicker 模块执行此操作。我有一个 API 只接受 MM-dd-yyyy 格式的日期值。我的挑战是塑造这个日期值，以便我可以将它发送到 API。

这是我目前尝试过的方法：

使用 bsConfig 如下：

  ngOnInit() {
    this.bsConfig = {
      containerClass: 'theme-red',
      dateInputFormat: 'MM-dd-yyyy'
    };
}

这是我的 html 输入：

<input class="form-control" 
        type="text" bsDatepicker 
        [bsConfig]="bsConfig" 
        placeholder="Date of Birth" 
        [(bsValue)]="participant.dob" value="{{ participant.dob | date:'yyyy-MM-dd' }}"
        name="dob" 
        [(ngModel)]="participant.dob" 
        #dob="ngModel">

当我 select 来自日期选择器的日期时，我看到日期是我在 ngOnInit 中设置的格式。但是，实际日期值为 { "dob": "2018-06-07T16:53:52.000Z" }。这是我发送到 API 的日期。因此，它不起作用。正如我上面提到的，我需要发送到 API 的日期格式必须是 MM-dd-yyyy 格式。

我如何塑造这个捕获的日期格式，以便我可以将这个值发送到我的 API？

Answer 1

在将日期发送到 API 之前，请使用 formatDate() 对其进行转换。

别忘了导入它：import { formatDate } from '@angular/common';

constructor(@Inject(LOCALE_ID) private locale: string) {}
myDate;
bsConfig;

ngOnInit() {
  this.bsConfig = {
    containerClass: 'theme-red',
    dateInputFormat: 'MM-dd-yyyy'
  };
}

sendDataToApi() {
  const date = formatDate(this.myDate, this.bsConfig.dateInputFormat, this.locale);
  howeverImSendingDataToApi(whateverData, date);
}

使用 ngx-datepicker 更改 [(ngModel)] 上的日期格式

Changing date format on [(ngModel)] using ngx-datepicker

date

ngx-bootstrap

angular