在 es5 中使用扩展的 ng-bootstrap datepicker 自定义日期适配器

编程问答 2022-05-10

问题描述

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

要格式化 ngb 日期，文档说明您应该创建一个自定义 datepicker 适配器来扩展 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：类构造函数 NgbDateParserFormatter 不能在没有“new”的情况下被调用

如果我将 tsconfig 更改为：

"target": "es6",

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

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

任何指导将不胜感激。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangulares5-compatiblityextendsng-bootstraptypescripttypescripttypescript