如何更改使用Angular强力支持的Bootstrap ngbDatepicker的模型结构

12 浏览
0 Comments

如何更改使用Angular强力支持的Bootstrap ngbDatepicker的模型结构

我正在使用基于Angular的Bootstrap ngbDatepicker。我创建了一个自定义控件,在不同的页面上用于日期选择,如下所示:



在这里,我将birthDate作为我的模型对象传递。

我想要:

  1. 用户应该能够通过点击文本框旁边的CAL按钮选择日期,
  2. 用户应该能够在文本框中以'MM/DD/YYYY'的格式输入日期。
  3. 选择或输入日期后,模型应该通过双向数据绑定以'YYYY-MM-DD'的字符串格式进行更新。

我已经成功完成了点1和点2,通过继承NgbDateParserFormatter,将文本框的日期格式设置为MM/DD/YYYY。

但是,我无法更改模型结构。当我需要与我的Web服务通信时,日期格式应为'YYYY-MM-DD'。

请帮助我实现相同的功能。这里是附带的plunker

0
0 Comments

问题的出现原因:想要改变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);
  }
}

0