[英]How to change ngbDatepicker date format from JSON to YYYY/MM/DD
I'm working with ngbDatepicker this is giving me JSON date format like:我正在使用 ngbDatepicker 这给了我 JSON 日期格式,如:
{ year: 2019, month: 6, day: 9 }
How can I convert this into YYYY/MM/DD?如何将其转换为 YYYY/MM/DD? I'm using Angular 7.
我正在使用 Angular 7。
My Code is as below:我的代码如下:
<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>
There two important class to manage ngbDate.有两个重要的类来管理 ngbDate。 one it's for formatting the date: a DateParserFormater, and another to change the value you get/send from/to a ngb-datepicker: a DateAdapter.
一个用于格式化日期:DateParserFormater,另一个用于更改您从/向ngb-datepicker获取/发送的值:DateAdapter。
So, you can create a customDateAdapter and a customDateParserFormatter.因此,您可以创建 customDateAdapter 和 customDateParserFormatter。 But, don't worry about the names.
但是,不要担心名称。 ist only two injectable class like, eg
只有两个可注入的类,例如
For 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
}
}
Yes a injectable class with two functions, one to transform a NgbDate to string and another to transform string to NgbDate.是的一个具有两个函数的可注入类,一个将 NgbDate 转换为字符串,另一个将字符串转换为 NgbDate。 remember that this change your "model"
请记住,这会更改您的“模型”
For CustomDateParserFormatter对于 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
}
}
Again an injectable class with two functions, one to transform a NgbDate to string and another to transform string to NgbDate.同样是一个具有两个函数的可注入类,一个将 NgbDate 转换为字符串,另一个将字符串转换为 NgbDate。 Remember that this change the "format" of the date -useful if you want, eg dd/MM/yyyy-
请记住,这会更改日期的“格式” - 如果您愿意,很有用,例如 dd/MM/yyyy-
Then just add as providers in your component然后只需在您的组件中添加为提供者
providers: [{provide: NgbDateAdapter, useClass: CustomDateAdapter},
{provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter}]
In the stackblitz see the definition of component, you can choose, eg在stackblitz看到组件的定义,你可以选择,例如
@Component({
selector: 'ngbd-datepicker-adapter',
templateUrl: './datepicker-adapter.html',
providers: [{provide: NgbDateAdapter, useClass: NgbDateNativeAdapter}]
})
or或者
@Component({
selector: 'ngbd-datepicker-adapter',
templateUrl: './datepicker-adapter.html',
providers: [{provide: NgbDateAdapter, useClass: CustomDateAdapter},
{provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter}]
})
even you can write即使你可以写
@Component({
selector: 'ngbd-datepicker-adapter',
templateUrl: './datepicker-adapter.html',
providers: [{provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter}]
})
To manteinance the objects like {year,month,day}, but change the "mask" -and the way you input the date维护像 {year,month,day} 这样的对象,但更改“掩码” - 以及输入日期的方式
NOTE: You can add the providers to the module too注意:您也可以将提供程序添加到模块中
你需要的是
var date = object.year + '/' + object.month + '/'+ object.day
if you are using date field you need to bind the model in ts.如果您使用日期字段,则需要在 ts 中绑定模型。 in the html, call the method dateselect like this
在html中,像这样调用dateselect方法
(dateSelect)="onDateSelect($event)"
Full code:完整代码:
<input class="form-control"(dateSelect)="onDateSelect($event)" id="TargetDate" placeholder="mm/dd/yyyy" name="targetDate" ngbDatepicker
#date="ngbDatepicker" />
<div class="input-group-append">
<button id="TargetDateButton" class="btn btn-outline-secondary" (click)="date.toggle()" type="button">
<span class="oi oi-calendar"></span>
</button>
</div>
In the type script, use the following code.This is applicable only if you are using Ngbdate picker.在类型脚本中,使用以下代码。这仅在您使用 Ngbdate 选择器时适用。
onDateSelect(event) {
let year = event.year;
let month = event.month <= 9 ? '0' + event.month : event.month;;
let day = event.day <= 9 ? '0' + event.day : event.day;;
let finalDate = year + "-" + month + "-" + day;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.