如何更改角动力引导程序ngbDatepicker的模型结构 [英] How to change model structure of angular powered bootstrap ngbDatepicker

问题描述

我正在使用角度启动的ngbDatepicker .我创建了自己的自定义控件，该控件将在不同的页面中用于日期捕获，如下所示.

I am using angular powered bootstrap ngbDatepicker. I have created my own custom control which will be used in different pages for date capturing as follows.

<form-date 
  [label]="'Date of birth'" 
  [name]="'inputCPDDOB'"
  [(ngModel)]="birthDate"
  placeholder="mm/dd/yyyy"
  required
  >
</form-date>

在这里，我已经将birthDate作为模型对象传递了.

Here I have passed birthDate as my model object.

我想要

1. 用户应该能够通过单击CAL按钮(在文本框旁边)选择日期，
2. 用户应该能够在文本框中输入格式为"MM/DD/YYYY"的日期.
3. 选择或键入日期后，应通过两种方式进行数据绑定，以将模型更新为格式为'YYYY-MM-DD'的字符串.

通过继承但是我无法更改模型结构.虽然我需要以'YYYY-MM-DD'格式与我的网络服务进行通信.

But I am not able to change the model structure. While I need to communicate with my web service as 'YYYY-MM-DD' format.

请帮助我实现相同目标.这是随附的 plunker .

Please help me to achieve the same. Here is the plunker attached.

推荐答案

因此，我认为解决问题的最简单方法是提供自己的NgbDateAdapter实现并将其注入到组件中.您将需要添加

So I think the easiest way to solve your problem is to provide your own implementation of NgbDateAdapter and inject that into you component. You will need to add

{provide: NgbDateAdapter, useClass: NgbUTCStringAdapter}

向您的组件提供程序数组并在某处定义NgbUTCStringAdapter:

to you components providers array and define the NgbUTCStringAdapter somewhere:

@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;
  }
}

另一种方法是将这段代码放入自定义表单控件中，如下所示:

The other way to do it would be to put this code into your custom form control something like this:

@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);
  }
}

这篇关于如何更改角动力引导程序ngbDatepicker的模型结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！