gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-11-01 00:47:54 24 4
gpt4 key购买 nike

我正在使用 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的定义,可以选择,例如

@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} 这样的对象,但是要改变“mask”——以及你输入日期的方式

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

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

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com