我正在使用 angular powered bootstrap ngbDatepicker .我已经创建了我自己的自定义控件,它将在不同的页面中用于日期捕获,如下所示。
<form-date
[label]="'Date of birth'"
[name]="'inputCPDDOB'"
[(ngModel)]="birthDate"
placeholder="mm/dd/yyyy"
required
>
</form-date>
我在这里传递了 birthDate
作为我的模型对象。
我要
- 用户应该能够通过单击 CAL 按钮(在文本框旁边)来选择日期,
- 用户应该能够在文本框中输入格式为“MM/DD/YYYY”的日期。
- 选择或输入日期后,模型应通过双向数据绑定(bind)更新为格式为“YYYY-MM-DD”的字符串。
通过继承NgbDateParserFormatter,我已经成功地将point#1和point#2文本框的日期格式设置为MM/DD/YYYY
但我无法更改模型结构。虽然我需要以“YYYY-MM-DD”格式与我的 Web 服务进行通信。
请帮助我实现同样的目标。这是 plunker附上。
最佳答案
所以我认为解决您的问题的最简单方法是提供您自己的 NgbDateAdapter 实现并将其注入(inject)到您的组件中。您将需要添加
{provide: NgbDateAdapter, useClass: NgbUTCStringAdapter}
给你的组件提供者数组并在某处定义 NgbUTCStringAdapter:
@Injectable()
export class NgbUTCStringAdapter extends NgbDateAdapter<string> {
fromModel(date: string): NgbDateStruct {
return (date && Number(date.substring(0, 4)) && Number(date.substring(5, 7) + 1) && Number(date.substring(8, 10))) ?
{year: Number(date.substring(0, 4)),
month: Number(date.substring(5, 7)),
day: Number(date.substring(8, 10))} : null;
}
toModel(date: NgbDateStruct): string {
return date ? date.year.toString() + '-' + String('00' + date.month).slice(-2)
+ '-' + String('00' + date.day).slice(-2) : null;
}
}
另一种方法是将此代码放入您的自定义表单控件中,如下所示:
@Component({
selector: 'app-date',
templateUrl: './date.component.html',
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DateComponent),
multi: true
},
{provide: NgbDateParserFormatter, useClass: NgbDateOmniParserFormatter}]
})
export class DateComponent implements ControlValueAccessor {
model;
writeValue(value: any) {
this.model = (value && Number(value.substring(0, 4)) &&
Number(value.substring(5, 7) + 1) &&
Number(value.substring(8, 10))) ?
{year: Number(value.substring(0, 4)),
month: Number(value.substring(5, 7)),
day: Number(value.substring(8, 10))} : null;
}
propagateChange = (_: any) => {};
registerOnChange(fn) {
this.propagateChange = fn;
}
registerOnTouched() {}
change() {
const date = this.model ? this.model.year.toString() + '-' +
String('00' + this.model.month).slice(-2) + '-' +
String('00' + this.model.day).slice(-2) : null;
this.propagateChange(date);
}
}
关于angular - 如何更改 Angular 动力 Bootstrap ngbDatepicker 的模型结构,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47919275/