javascript - 如何将 ngbDatepicker 日期格式从 JSON 更改为 YYYY/MM/DD

我正在使用 ngbDatepicker 这给了我 JSON 日期格式，如:

{ year: 2019, month: 6, day: 9 }

如何将其转换为 YYYY/MM/DD？
我正在使用 Angular 7。

我的代码如下:

<div class="input-group">
   <input class="form-control" placeholder="YYYY-MM-DD"
          (click)="d2.toggle()" (ngModelChange)="onDateSelection($event,'ToDate');"  name="d2" #c2="ngModel" [(ngModel)]="toDate" ngbDatepicker #d2="ngbDatepicker">
         <div class="input-group-append">
          <button class="btn btn-outline-secondar"
             (click)="d2.toggle()" type="button">
           <i class="fa fa-calendar" aria-hidden="true"></i>
          </button>
         </div>
 </div>

最佳答案

有两个重要的类来管理 ngbDate。一个用于格式化日期:DateParserFormater，另一个用于更改您从/向ngb-datepicker获取/发送的值:DateAdapter。

因此，您可以创建 customDateAdapter 和 customDateParserFormatter。但是，不要担心名称。只有两个可注入(inject)的类，例如

对于自定义日期适配器

@Injectable()
export class CustomDateAdapter {
  fromModel(value: string): NgbDateStruct
  {
     if (!value)
      return null
     let parts=value.split('/');
     return {year:+parts[0],month:+parts[1],day:+parts[2]}
  }

  toModel(date: NgbDateStruct): string // from internal model -> your mode
  {
    return date?date.year+"/"+('0'+date.month).slice(-2)
           +"/"+('0'+date.day).slice(-2):null
  }
}

是的一个具有两个函数的可注入(inject)类，一个将 NgbDate 转换为字符串，另一个将字符串转换为 NgbDate。请记住，这会更改您的“模型”

对于 CustomDateParserFormatter

@Injectable()
export class CustomDateParserFormatter {
  parse(value: string): NgbDateStruct
  {
    if (!value)
      return null
     let parts=value.split('/');
     return {year:+parts[0],month:+parts[1],day:+parts[2]} as NgbDateStruct

  }
  format(date: NgbDateStruct): string
  {
    return date?date.year+"/"+('0'+date.month).slice(-2)+"/"+('0'+date.day).slice(-2):null
  }
}

同样是一个具有两个函数的可注入(inject)类，一个将 NgbDate 转换为字符串，另一个将字符串转换为 NgbDate。请记住，如果您愿意，这会更改日期的“格式” - 有用，例如日/月/年-

然后只需在您的组件中添加为提供者

  providers: [{provide: NgbDateAdapter, useClass: CustomDateAdapter},
              {provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter}]

在 stackblitz 中看到组件的定义，可以选择，例如

@Component({
  selector: 'ngbd-datepicker-adapter',
  templateUrl: './datepicker-adapter.html',
  providers: [{provide: NgbDateAdapter, useClass: NgbDateNativeAdapter}]
})

或者

@Component({
  selector: 'ngbd-datepicker-adapter',
  templateUrl: './datepicker-adapter.html',
  providers: [{provide: NgbDateAdapter, useClass: CustomDateAdapter},
          {provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter}]
})

即使你可以写

@Component({
  selector: 'ngbd-datepicker-adapter',
  templateUrl: './datepicker-adapter.html',
  providers: [{provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter}]
})

维护像 {year,month,day} 这样的对象，但更改“掩码” - 以及输入日期的方式

注意:您也可以将提供程序添加到模块中

关于javascript - 如何将 ngbDatepicker 日期格式从 JSON 更改为 YYYY/MM/DD，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56685403/