首页 > 解决方案 > 使用 es5 中的扩展的 ng-bootstrap datepicker 自定义日期适配器

问题描述

我意识到这不是 ng-boostrap 的问题,但我一直在寻找答案,但没有找到任何对我有帮助或有意义的东西,因为我认为这是一个常见问题。我想我会在这里问,希望有人以前遇到过这个问题。

要格式化 ngb 日期文档状态,您应该创建一个自定义日期选择器适配器,该适配器扩展 NgbDateAdapter 和 NgbDateParserFormatter 类。

这是我的:

import { Injectable} from '@angular/core';
import { NgbDateAdapter, NgbDateParserFormatter, NgbDateStruct} from '@ng-bootstrap/ng-bootstrap';
import * as moment from 'moment';

@Injectable()
export class CustomAdapter extends NgbDateAdapter<moment.Moment | string> {

  readonly DELIMITER = '-';

  fromModel(date: moment.Moment | string): NgbDateStruct {
    if (!date) {
      return null;
    }

    if (!moment.isMoment(date)) {
      date = moment(date);
    }

    return {
      year: date.year(),
      month: date.month() + 1,
      day: date.date(),
    };
  }

  toModel(date: NgbDateStruct): moment.Moment {
    if (!date) {
      return null;
    }

    return moment(`${date.year}-${date.month}-${date.day}`, 'YYYY-MM-DD');
  }
}

@Injectable()
export class CustomDateParserFormatter extends NgbDateParserFormatter {

  parse(value: string): NgbDateStruct {
    if (value) {
      const date = moment(new Date(value), "YYYY-MM-DD");
      return { day: date.date(), month: date.add(1, 'M').month(), year: date.year() };
    }
    return null;
  }

  format(value: NgbDateStruct): string {
    if (!value) {
      return '';
    }
    const date = moment([value.year, value.month - 1, value.day]);
    return date.isValid() ? date.format('MMM D, YYYY') : '';
  }
}

在我的 tsconfig 我有

"target": "es5",

但是我的日期选择器抛出了这个错误,我假设是因为我试图扩展类,即使那是文档说明要做的事情:

VM4213 angular.js:15635 TypeError:没有'new'就不能调用类构造函数NgbDateParserFormatter

如果我将 tsconfig 更改为:

"target": "es6",

它不再抛出错误,但我的应用不再支持 IE11。

我无法想象我是唯一遇到这种情况的人,但是我使用的是自定义 angular 10 构建,没有 angular-cli 所以谁知道。

任何指导将不胜感激。

标签: angulartypescriptextendsng-bootstrapes5-compatiblity

解决方案


推荐阅读