如何更改使用Angular强力支持的Bootstrap ngbDatepicker的模型结构
如何更改使用Angular强力支持的Bootstrap ngbDatepicker的模型结构
我正在使用基于Angular的Bootstrap ngbDatepicker。我创建了一个自定义控件,在不同的页面上用于日期选择,如下所示:
在这里,我将birthDate
作为我的模型对象传递。
我想要:
- 用户应该能够通过点击文本框旁边的CAL按钮选择日期,
- 用户应该能够在文本框中以'MM/DD/YYYY'的格式输入日期。
- 选择或输入日期后,模型应该通过双向数据绑定以'YYYY-MM-DD'的字符串格式进行更新。
我已经成功完成了点1和点2,通过继承NgbDateParserFormatter,将文本框的日期格式设置为MM/DD/YYYY。
但是,我无法更改模型结构。当我需要与我的Web服务通信时,日期格式应为'YYYY-MM-DD'。
请帮助我实现相同的功能。这里是附带的plunker。
问题的出现原因:想要改变Angular-powered bootstrap ngbDatepicker的模型结构。
解决方法1:提供自己的NgbDateAdapter实现,并将其注入到组件中。在组件的providers数组中添加以下代码:
{provide: NgbDateAdapter, useClass: NgbUTCStringAdapter}
并在某处定义NgbUTCStringAdapter:
() export class NgbUTCStringAdapter extends NgbDateAdapter{ 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; } }
解决方法2:将这段代码放入自定义表单控件中,类似于以下示例:
({ 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); } }