ngb 日期选择器日期格式和显示更改

Question

我正在使用 ngb 日期选择器。这是我的html

<div class="input-group">
   <input class="form-control ngbfield" placeholder="yyyy-mm-dd" required
      name="checkdate" [readonly]="true" #vl="ngModel"
      [(ngModel)]="profile.checkDate" ngbDatepicker #d1="ngbDatepicker"
      required>
   <div class="input-group-append">
      <button class="btn btn-outline-secondary fa fa-calendar" (click)="d1.toggle()" type="button"></button>
   </div>
</div>

目前，日期选择器运行良好。我使用控制台日志检查了它。这是我的控制台日志

这是我的组件文件

export class MyProfileComponent implements OnInit {
   profile: any = {};
   @ViewChild(NgForm) profileform: NgForm;
   dtOptions: DataTables.Settings = {};
   constructor(private calendar: NgbCalendar) { }
    
   ngOnInit() {
      this.selectToday();
   }
   selectToday() {
     this.profile.checkDate = this.calendar.getToday();
   }
   addScheduleCheckin(a) {
     console.log(a);
     alert(a);
   }
}

但我需要得到这个日期如下 检查日期：“2021-05-22”

在这个库中有任何选择。

Answer 1

这篇文章有一个非常有趣的答案：How to change ngbDatepicker date format from JSON to YYYY/MM/DD

您需要创建一个适配器来将 NgbDateStruct 转换为您想要的字符串格式并将字符串转换为 NgbDateStruct，然后将其添加到您的提供程序中

编辑以在评论中回答您的问题：

要创建服务并在您希望的任何地方使用它，您首先要创建这样的服务：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})

export class ConverterDateService {
   
   constructor() { }

   convertNgbDateToString(dateToConvert) {
      return dateToConvert.year + '-' + ('0' + (dateToConvert.month)).slice(-2) + '-' + ('0' + dateToConvert.day).slice(-2);
   }

然后像这样将它注入到组件的构造函数中：

constructor(private converterDateService: ConverterDateService) { }

然后你把它调用到你的函数中：

this.formattedCheckDate = this.converterDateService.convertNgbDateToString(this.profile.checkDate);

希望对你有帮助:)