angular - 无法将日期设置为 Angular 中的 ng Bootstrap 日期选择器
问题描述
我在 Angular 中工作,我以反应形式使用 ng Bootstrap Datepicker
我尝试使用补丁值将值设置为 ngBootstrap DatePicker 但无法为其设置值
我正在分享我的代码
html
<div class="form-group required control-label">
<label>Date of Joining</label>
<!-- <input type="text" class="form-control" formControlName="doj" placeholder=""/> -->
<div class="form-group">
<div class="input-group">
<input class="form-control" formControlName="doj" placeholder="yyyy-mm-dd" name="dp" ngbDatepicker
#e="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary calendar" (click)="e.toggle()" type="button"></button>
</div>
</div>
</div>
</div>
TS
this.employeeForm.patchValue({
doj: this.date
})
解决方案
ngbDatepicker 使用 NgbDateStruct 接口作为模型,而不是原生 Date 对象。
this.employeeForm.patchValue({
doj : { year: 2020, month: 2, day: 6 } // should be { year , month , date } format
})
或创建自定义解析器格式化程序。
import { NgbDateParserFormatter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
import { Injectable } from '@angular/core';
import { isNumber, toInteger, padNumber } from '@ng-bootstrap/ng-bootstrap/util/util';
@Injectable()
export class NgbDateCustomParserFormatter extends NgbDateParserFormatter {
parse(value: string): NgbDateStruct {
if (value) {
const dateParts = value.trim().split('-');
if (dateParts.length === 1 && isNumber(dateParts[0])) {
return {day: toInteger(dateParts[0]), month: null, year: null};
} else if (dateParts.length === 2 && isNumber(dateParts[0]) && isNumber(dateParts[1])) {
return {day: toInteger(dateParts[0]), month: toInteger(dateParts[1]), year: null};
} else if (dateParts.length === 3 && isNumber(dateParts[0]) && isNumber(dateParts[1]) && isNumber(dateParts[2])) {
return {day: toInteger(dateParts[0]), month: toInteger(dateParts[1]), year: toInteger(dateParts[2])};
}
}
return null;
}
format(date: NgbDateStruct): string {
return date ?
`${isNumber(date.day) ? padNumber(date.day) : ''}-${isNumber(date.month) ? padNumber(date.month) : ''}-${date.year}` :
'';
}
}
在@NgModule 中设置自定义解析器格式化程序的提供程序。
providers: [
{provide: NgbDateParserFormatter, useClass: NgbDateCustomParserFormatter}
]
推荐阅读
- .htaccess - 在“索引”视图而不是单个文件上添加基本身份验证(htpasswd)
- twincat - 如何在 TwinCAT 中热启动一个方法?
- machine-learning - 为什么 Scikit-learn RFECV 会为训练数据集返回非常不同的特征?
- python - Django按日期分页(周)
- git - 如何将远程分支添加到我的本地仓库?
- maven - Maven:如何清除自定义本地存储库
- html - 下拉导航栏中我的块元素中的空间
- scheme - 使用 map 或 reduce 或 filter,在 Scheme 中,计算列表中有多少个元素
- python - Python 游标实例 - mongodb
- javascript - 当我在导航栏中加载我的组件时,材料 ui 选项卡进入无限循环(appbar>tabspanel)