Question

不幸的是，这个琐碎的任务有一些问题，但这似乎是使用此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;
}

Answer 1

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

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

因此，您需要确定是否要使用元素{year：...，month：...，dat：...}或对象javascript的日期。

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

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

NgbDatePicker无法使用NgbDateParserFormatter正确格式化日期

1 个答案: