我正在使用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。但是,不用担心名称。只有两个可注射类,例如
对于customDateAdapter
@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 } }
是的,具有两个函数的可注入类,一个函数将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 } }
同样是具有两个函数的可注入类,一个将NgbDate转换为字符串,另一个将字符串转换为NgbDate。请记住,此更改日期的“格式”-如果需要,可以使用,例如dd / MM / yyyy-
然后在组件中添加为提供者
providers: [{provide: NgbDateAdapter, useClass: CustomDateAdapter}, {provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter}]
在堆栈闪电查看组件的定义中,可以选择,例如
@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}之类的对象,但要更改“掩码”-以及输入日期的方式
注意:您也可以将提供程序添加到模块中