Question

我需要你的帮助，使用NgbDateParserFormatter作为ng-bootstrap的datepicker。我需要德语格式dd.MM.yyyy（例如31.03.2017）。

我有一个plunker，但它无法正常运行：

选择一些日期工作（选择例如17.03.2017导致17.03.2017）
选择一些日期不起作用（选择02.09.1937到1937年9月1日）
键入日期交换日期和月份（01.03.2017到03.01.2017和14.03.2017得到空输入，因为没有03.14.2017）

以下是代码：

import { NgbDateParserFormatter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
import { DatePipe } from '@angular/common';

export class CustomNgbDateParserFormatter extends NgbDateParserFormatter {
    datePipe = new DatePipe('de-AT');
    constructor(
        private dateFormatString: string) {
        super();
    }
    format(date: NgbDateStruct): string {
        if (date === null) {
            return '';
        }
        try {
            return this.datePipe.transform(new Date(date.year, date.month - 1, date.day), this.dateFormatString);
        } catch (e) {
            return '';
        }
    }
    parse(value: string): NgbDateStruct {
        let returnVal: NgbDateStruct;
        if (!value) {
            returnVal = null;
        } else {
            try {
                let dateParts = this.datePipe.transform(value, 'M-d-y').split('-');
                returnVal = { year: parseInt(dateParts[2]), month: parseInt(dateParts[0]), day: parseInt(dateParts[1]) };
            } catch (e) {
                returnVal = null;
            }
        }
        return returnVal;
    }
}

请问你能帮帮我吗？

非常感谢你的帮助。

Answer 1

使用JS Date对象和DatePipe，您正在为自己的生活更加努力。由于以下原因，这些是有问题的：

Date JS对象携带时间和时区信息，因此您可以轻松地进入与时区转换相关的问题 - 这正是ng-bootstrap使用专用数据结构的原因
DataPipe在引擎盖下使用了Intl API，不幸的是它非常错误。

好消息是，您可以按照此处所示的ISO解析器/格式化程序轻松实现所需的功能：https://github.com/ng-bootstrap/ng-bootstrap/blob/088363551b5d5ecd602a82aedfc97d43a75a080f/src/datepicker/ngb-date-parser-formatter.ts#L25-L45

如果我正确地阅读了您的意图，您的代码可能如下所示：

export class CustomNgbDateParserFormatter extends NgbDateParserFormatter {

    format(date: NgbDateStruct): string {
      return date ? `${padNumber(date.month)}.${padNumber(date.day)}.${date.year}` : '';
    }

    parse(value: string): NgbDateStruct {
        if (value) {
      const dateParts = value.trim().split('.');
      if (dateParts.length === 1 && isNumber(dateParts[0])) {
        return {year: null, month: toInteger(dateParts[0]), day: null};
      } else if (dateParts.length === 2 && isNumber(dateParts[0]) && isNumber(dateParts[1])) {
        return {year: null, month: toInteger(dateParts[0]), day: toInteger(dateParts[1])};
      } else if (dateParts.length === 3 && isNumber(dateParts[0]) && isNumber(dateParts[1]) && isNumber(dateParts[2])) {
        return {year: toInteger(dateParts[2]), month: toInteger(dateParts[0]), day: toInteger(dateParts[1])};
      }
    }
    return null;
    }
}

以下是一名动画人员：https://plnkr.co/edit/JdX0eHcl7QddOWxM9aT0?p=preview

Answer 2

这主要是pkozlowski.opensource的答案，但交换了月/日，因为这是德国的常见格式。

import { NgbDateParserFormatter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
import { DatePipe } from '@angular/common';

function padNumber(value: number) {
    if (isNumber(value)) {
        return `0${value}`.slice(-2);
    } else {
        return '';
    }
}

function toInteger(value: any): number {
    return parseInt(`${value}`, 10);
}

function isNumber(value: any): boolean {
    return !isNaN(toInteger(value));
}

export class CustomNgbDateParserFormatter extends NgbDateParserFormatter {

    format(date: NgbDateStruct): string {
        return date ? `${padNumber(date.day)}.${padNumber(date.month)}.${date.year}` : '';
    }

    parse(value: string): NgbDateStruct {
        if (value) {
            const dateParts = value.trim().split('.');
            if (dateParts.length === 1 && isNumber(dateParts[0])) {
                return { year: null, day: toInteger(dateParts[0]), month: null };
            } else if (dateParts.length === 2 && isNumber(dateParts[0]) && isNumber(dateParts[1])) {
                return { year: null, day: toInteger(dateParts[0]), month: toInteger(dateParts[1]) };
            } else if (dateParts.length === 3 && isNumber(dateParts[0]) && isNumber(dateParts[1]) && isNumber(dateParts[2])) {
                return { year: toInteger(dateParts[2]), day: toInteger(dateParts[0]), month: toInteger(dateParts[1]) };
            }
        }
        return null;
    }
}

Answer 3

这是我的解决方案，希望对您有所帮助。要使其正常工作，您必须像这样在 app.module.ts 中输入一个条目：

providers: [...,
{ provide: NgbDateParserFormatter, useClass: NgbDateFRParserFormatter }]

您从日期选择器中选择一个日期或手动输入日期，它将自动将其格式转换为dd.MM.yyyy。

import { Injectable, Inject } from '@angular/core';
import { NgbDateParserFormatter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';


@Injectable()
export class NgbDateFRParserFormatter extends NgbDateParserFormatter {

parse(value: string): NgbDateStruct {
if (value) {
  const dateParts = value.trim().split('/');
  if (dateParts.length === 1 && isNumber(dateParts[0])) {
    return { year: toInteger(dateParts[0]), month: null, day: null };
  } else if (
    dateParts.length === 2 &&
    isNumber(dateParts[0]) &&
    isNumber(dateParts[1])
  ) {
    return {
      year: toInteger(dateParts[1]),
      month: toInteger(dateParts[0]),
      day: null
    };
  } else if (
    dateParts.length === 3 &&
    isNumber(dateParts[0]) &&
    isNumber(dateParts[1]) &&
    isNumber(dateParts[2])
  ) {
    return {
      year: toInteger(dateParts[2]),
      month: toInteger(dateParts[1]),
      day: toInteger(dateParts[0])
    };
  }
}
 return null;
}


format(date: NgbDateStruct): string {
let stringDate = '';
const language = this.authService.getUser().language;

  if (date) {
    stringDate += isNumber(date.day) ? padNumber(date.day) + '.' : '';
    stringDate += isNumber(date.month) ? padNumber(date.month) + '.' : '';
    stringDate += date.year;
  }
   return stringDate;
  }
 }

 function padNumber(value: number) {
  if (isNumber(value)) {
  return `0${value}`.slice(-2);
 } else {
  return '';
 }
}

 function isNumber(value: any): boolean {
   return !isNaN(toInteger(value));
}

   function toInteger(value: any): number {
   return parseInt(`${value}`, 10);
  }

ng-bootstrap的日期选择器的德国日期格式

3 个答案: