NgbDatePicker 没有使用 NgbDateParserFormatter 正确格式化日期答案

【问题标题】：NgbDatePicker doesn't format Date correctly using NgbDateParserFormatterNgbDatePicker 没有使用 NgbDateParserFormatter 正确格式化日期
【发布时间】：2019-12-06 20:04:44
【问题描述】：

不幸的是，这个微不足道的任务遇到了一些问题，但似乎这是一种推荐的在输入字段中格式化日期的方法，使用这个 ParserFormater。当用户从日历中选择日期时，日期会以“dd-MM-yyyy”格式（如我所愿）正确显示在输入字段框中，但是当我将详细信息保存到数据库中时，会返回日期回到一些奇怪的格式，它甚至不正确。我得到这样的东西：'1907-02-09T00:00:00'......如果有人能指出我正确的方向，这是下面的前端代码：

//html
      <div class="form-group">
        <label for="motDate">MOT Date</label>
        <input type="text" class="form-control" placeholder="dd-mm-yyyy"
               ngbDatepicker #d="ngbDatepicker" (focus)="d.open()" (dateSelect)="onMOTDateSelected($event)" #motDate>
        <input type="hidden" [(ngModel)]="model.motDate" name="motDate"/>
      </div>

//typescript
export class AppComponent {
  model: Vehicle = <Vehicle>{};

  @ViewChild('motDate') motDatePicker;

  ngOnInit() {
    this.motDatePicker.nativeElement.value = this.model.motDate;
  }

  onMOTDateSelected(e) {
    console.log("MOT Date Selected");
    this.model.motDate = new Date(e.day, e.month, e.year);
  }
}

@Injectable()
export class NgbDateCustomParserFormatter extends NgbDateParserFormatter {
  parse(value: string): NgbDateStruct {
    if (value) {
      const dateParts = value.trim().split("/");
      if (dateParts.length === 1 && isNumber(dateParts[0])) {
        return { day: toInteger(dateParts[0]), month: null, year: null };
      } else if (dateParts.length === 2 && isNumber(dateParts[0]) && isNumber(dateParts[1])) {
        return {
          day: toInteger(dateParts[0]),
          month: toInteger(dateParts[1]),
          year: null
        };
      } else if (dateParts.length === 3 && isNumber(dateParts[0]) && isNumber(dateParts[1]) && isNumber(dateParts[2])) {
        return {
          day: toInteger(dateParts[0]),
          month: toInteger(dateParts[1]),
          year: toInteger(dateParts[2])
        };
      }
    }
    return null;
  }

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

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

export function isNumber(value: any): value is number {
  return !isNaN(toInteger(value));
}

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

// vehicle model
export interface Vehicle {
  motDate: Date;
}

【问题讨论】：

您能否在 stackblitz 或 jsfiddle 中重新创建您的错误？到时候帮忙会容易很多。看起来有点不对劲的一件事是，在您的 parse 方法中，它应该将输入字符串转换为 NgbDateStruct 应该是返回的对象，有一个 split(/) 但您的输入格式中没有任何斜杠日期。输入日期时，parse方法的结果是什么？
目前没有错误可以重新创建。从数据库返回并在 ngOnInit 上初始化的日期如下所示：''1907-02-09T00:00:00'，而不是例如。 '29/07/2019'....所以我的猜测是格式化模型值'motDate'有问题，但不知道为什么。至于解析器，我使用了在此讨论中找到的解析器：github.com/ng-bootstrap/ng-bootstrap/issues/2072 我注意到其他一些插件只有一个简单的 displayFormat 选项，但不能像我的高级开发人员建议的那样使用其他任何东西，但不愿意提供帮助.
但我假设您从数据库接收到的日期格式不会改变。因此，您首先真正需要的是组件内的服务或方法，它将您的数据库日期模型转换为您的视图日期模型，该模型需要是 NgbDateStruct 类型。然后您需要从 NgbDateStruct 转换为 String 并返回的 CustomFormatter。每当您想将日期发送回服务器时，您都需要将其转换回服务器接受的正确形式。

标签： angular typescript angular7

【解决方案1】：

Zokes，NgbDate NgbDateStruct 接口作为模型，而不是原生 Date 除非您用作提供者 NgbDateNateiveAdapter 或 NgbDateNativeUTCAdapter

providers: [{provide: NgbDateAdapter, useClass: NgbDateNativeAdapter}]

因此，您需要决定是使用元素 {year:...,month:...,dat:...} 还是使用 JavaScript 的对象 Date。

您通常使用字符串或使用对象日期（或日期时间）将数据存储在数据库中，并且您以相同的方式接收。所以我喜欢在自己的服务中转换日期。想象一下，您在服务数据中收到了属性“日期”

getData(key:any)
{
     this.get(...).pipe(map((response)=>{
        let parts=response.date.split('T')[0].split('-')
        response.date={year:+parts[0],month:+parts[1],day:+parts[2]}
        return response;
     }
     ))
}
getList(key:any)
{
     this.get(...).pipe(map((response:any[])=>{
        response.forEach(x=>{
         let parts=x.date.split('T')[0].split('-')
         x.date={year:+parts[0],month:+parts[1],day:+parts[2]}
        })
        return response;
     }
     ))
}
updateData(data)
{
    data.date=data.year+"-"+data.month+"-"+data.day
    this.http.post(....,data)
}

【讨论】：