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

Question

我是 uisng 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

关于这个 post 有一个非常有趣的答案：

您需要创建一个适配器来将 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);

希望对您有所帮助:)

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

ngb date picker date format and display change

ng-bootstrap

angular